添加或移除多组数据（JQ） 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src = 'jquery-3.1.1.js'></script>
 7     <style type="text/css">
 8         div{
 9             text-align: center;
10         }
11         td{
12             text-align: center;
13         }
14     </style>
15 </head>
16 <body>
17 <div>
18     <button>添加</button>
19     <button>删除</button>
20 </div>
21 
22 <table border="1" cellpadding="0" cellspacing="0" align="center" width="600px">
23     <thead>
24         <tr>
25             <th>姓名</th>
26             <th>年龄</th>
27             <th>手机号</th>
28             <th>删除</th>
29         </tr>
30     </thead>
31 </table>
32 
33 <script type="text/javascript">
34     var a = 0;
35     jsoner = [{
36         "name" : "胡歌",
37         "age" : 37,
38         "phone" : 12088208820
39     },{
40         "name" : "包贝尔",
41         "age" : 27,
42         "phone" : 12088208820
43     },{
44         "name" : "张艺兴",
45         "age" : 27,
46         "phone" : 12088208820
47     },{
48         "name" : "刘德华",
49         "age" : 47,
50         "phone" : 12088208820
51     },{
52         "name" : "毛",
53         "age" : 10000,
54         "phone" : 12088208820
55     }
56     ]
57     $("button:eq(0)").on("click",function(){
58         $.each(jsoner,function(index,value){
59             $("table").append("<tr>");
60             $("tr").last().append("<td>"+value.name+"</td>");
61             $("tr").last().append("<td>"+value.age+"</td>");
62             $("tr").last().append("<td>"+value.phone+"</td>");
63             $("tr").last().append("<td><button>删除</button></td>");
64         })
65     })
66     $("table").on("click","button",function(){
67         $(this).parent().parent().remove();
68     })
69 </script>
70 </body>
71 </html>

 

posted on 2018-08-06 22:34  山外青楼  阅读(188)  评论(0)    收藏  举报

导航