表格中删除一行和添加一行
用jquery在表格中删除一行和添加一行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table> 9 <tr> 10 <td><input type="text" value="请输入姓名"></td> 11 <td><input type="text" value="请输入姓名"></td> 12 <td><input type="text" value="请输入姓名"></td> 13 <td><input type="button" value="添加" class="add"></td> 14 <td><input type="button" value="删除" class="remove"></td> 15 </tr> 16 <tr> 17 <td><input type="text" value="请输入姓名"></td> 18 <td><input type="text" value="请输入姓名"></td> 19 <td><input type="text" value="请输入姓名"></td> 20 <td><input type="button" value="添加" class="add"></td> 21 <td><input type="button" value="删除" class="remove"></td> 22 </tr> 23 <tr> 24 <td><input type="text" value="请输入姓名"></td> 25 <td><input type="text" value="请输入姓名"></td> 26 <td><input type="text" value="请输入姓名"></td> 27 <td><input type="button" value="添加" class="add"></td> 28 <td><input type="button" value="删除" class="remove"></td> 29 </tr> 30 </table> 31 </body> 32 </html> 33 <script type="text/javascript" src="jquery-1.11.0.js"></script> 34 <script type="text/javascript"> 35 $(function(){ 36 $('.add').click(function(){ 37 $(this).parent('td').parent('tr').before($(this).parent('td').parent('tr').clone(true));//使用clone复制 38 }); 39 $('.remove').click(function(){ 40 $(this).parent('td').parent('tr').remove(); 41 }); 42 }) 43 </script>
效果如下：
