1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-1.12.3.js"></script> 7 <script> 8 //代码从这里开始写 9 10 $(function(){ 11 12 //点击保存 13 $("#save").click(function(){ 14 15 var tr = $("<tr></tr>").appendTo("#tab"); 16 $("<td>"+ $("#uid").val() +"</td>").appendTo(tr); 17 $("<td>"+ $("#name").val() +"</td>").appendTo(tr); 18 $("<td>"+ $("#phone").val() +"</td>").appendTo(tr); 19 var td = $("<td><a href='#' >删除</a></td>").appendTo(tr); 20 21 //es6写法 22 // let demo = `<tr> 23 // <td>${$("#uid").val()}</td> 24 // <td>${$("#name").val()}</td> 25 // <td>${$("#phone").val()}</td> 26 // <td><a href="javascript:;">删除</a></td> 27 // </tr>`; 28 // $("#tab").append(demo); 29 30 31 32 //删除事件 :可删除添加的tr,不能删除以前的 33 // td.find("a").click(function(){ 34 // console.log(1); 35 // $(this).parents("tr").remove(); 36 // }) 37 }) 38 39 //删除事件 可以删以前的，不能删除添加的 40 // $("a").click(function(){ 41 // console.log(2); 42 // $(this).parents("tr").remove(); 43 // }) 44 45 //可删除以前的，也可删添加的 46 $("body").on("click", "a", function(){ 47 $(this).parents("tr").remove(); 48 }) 49 50 51 }) 52 53 </script> 54 </head> 55 <body> 56 ID <input type="text" id="uid"/> 57 姓名<input type="text" id="name"/> 58 电话<input type="text" id="phone"/> 59 <input id="save" type="button" value="保存" /> 60 61 <table border="1" id="tab"> 62 <tr> 63 <th>Id</th> 64 <th>Name</th> 65 <th>Tel</th> 66 <th>操作</th> 67 </tr> 68 <tr> 69 <td>30</td> 70 <td>张三</td> 71 <td>13554354534</td> 72 <td><a href="#" >删除</a></td> 73 </tr> 74 <tr> 75 <td>40</td> 76 <td>李四</td> 77 <td>1355443434</td> 78 <td><a href="#">删除</a></td> 79 </tr> 80 </table> 81 </body> 82 </html>
