jquery学习之1.22-小练习5-实现添加页面上填写信息到当前页面表格中

效果图：

实现代码：

  1 <%@ page language="java" import="java.util.*"
  2  pageEncoding="utf-8"%>
  3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4 <html>
  5   <head>
  6   <title>11</title>    
  7   <style type="text/css">
  8   body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;text-align:center}
  9   table{border:5px solid grey;margin:0 auto;width:500px;height:300px;background:#11fadd;text-align:center}
 10   table tr td{border:1px solid #abcddd;}
 11   </style>
 12   <script type="text/javascript" src="../js/jquery-1.11.0.js">
 13   </script>
 14   <script language="javascript">
 15    $(document).ready(function()
 16   {                   
 17          $("#add").click(function (){         
 18          //获取用户输入的用户名
 19          var username=$("#username").val();
 20          var email=$("#email").val();
 21          var phone=$("#phone").val();    
 22          alert(username+email+phone);
 23          //一步到位,后面添加事件的时候会失败
 24          /*
 25          $tr=$("<tr><td>"+1+
 26          "</td><td>"+$username+
 27          "</td><td>"+$email+
 28          "</td><td>"+$phone+
 29          "</td><td>"+"<a href=#>删除</a>"+
 30          "</td></tr>");
 31          $tr.appendTo($("table"))
 32          */
 33          
 34          //逐步添加
 35          $tr=$("<tr></tr>");
 36          $name_td=$("<td></td>");
 37          $name_td.text(username);
 38          $name_td.appendTo($tr);
 39          
 40          
 41          $email_td=$("<td></td>");
 42          $email_td.text(email);
 43          $email_td.appendTo($tr);
 44          
 45          
 46          $phone_td=$("<td></td>");
 47          $phone_td.text(phone);
 48          $phone_td.appendTo($tr);
 49          
 50          $a_td=$("<td></td>");
 51          $myhref=$("<a ></a>");
 52          $myhref.text("删除");
 53          $myhref.attr("href","");
 54          $myhref.appendTo($a_td);
 55          $a_td.appendTo($tr);
 56      
 57      
 58         $myhref.click(function(){
 59         var b=window.confirm("确认删除"+$(this).parent().parent().children().eq(0).text()+"?");
 60         if(b)
 61         {
 62             $(this).parent().remove();
 63             return true;
 64         }
 65         else{
 66             return false;
 67             }
 68         });
 69      
 70          $tr.appendTo($("table"));
 71          
 72          
 73          
 74          
 75          
 76          
 77          });          
 78    });
 79   
 80   </script>
 81   </head> 
 82   <body>
 83     用户名<input type="text" name="username" id="username" ></input>
 84     邮箱<input type="text" name="email" id="email" ></input>
 85     电话<input type="text" name="phone" id="phone" ></input>
 86     <input type="button" id="add"  value="添加"/>
 87     <hr>
 88     <table>
 89             <tr>
 90                 
 91                 <td>用户名</td>
 92                 <td>邮箱</td>
 93                 <td>电话</td>    
 94                 <td>操作</td>            
 95             </tr>            
 96             <tr>
 97                 <td>wang</td>
 98                 <td>wang@qq.com</td>
 99                 <td>12322112212</td>
100                 <td><a href=#>delete</a></td>
101             </tr>
102             
103   </body>
104 </html>
my Code

 

 

posted @ 2014-03-30 15:23  testForever  阅读(182)  评论(0)  编辑  收藏  举报