jQuery实现表格新增删除行（同时为新增行注册事件） 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding:0;
 10         }
 11         html,body{
 12             width: 100%;
 13             height: 100%;
 14         }
 15         table{
 16             margin: 100px auto;
 17         }
 18 
 19         td{
 20             width: 20px;
 21             height: 30px;
 22             background-color: #cccccc;
 23             text-align: center;
 24         }
 25     </style>
 26 </head>
 27 <body>
 28 
 29 <input type="button" value="添加一条">
 30 <table>
 31 
 32     <thead>
 33         <td>Title1</td>
 34         <td>Title2</td>
 35         <td><input type="button" value="全部删除"></td>
 36     </thead>
 37 
 38     <tbody>
 39 
 40     <tr>
 41         <td>A1</td>
 42         <td>A2</td>
 43         <td><input type="button" value="删除"></td>
 44     </tr>
 45 
 46     <tr>
 47         <td>B1</td>
 48         <td>B2</td>
 49         <td><input type="button" value="删除"></td>
 50     </tr>
 51 
 52     <tr>
 53         <td>C1</td>
 54         <td>C2</td>
 55         <td><input type="button" value="删除"></td>
 56     </tr>
 57 
 58     <tr>
 59         <td>D1</td>
 60         <td>D2</td>
 61         <td><input type="button" value="删除"></td>
 62     </tr>
 63 
 64     <tr>
 65         <td>E1</td>
 66         <td>E2</td>
 67         <td><input type="button" value="删除"></td>
 68     </tr>
 69 
 70     <tr>
 71         <td>F1</td>
 72         <td>F2</td>
 73         <td><input type="button" value="删除"></td>
 74     </tr>
 75 
 76     <tr>
 77         <td>G1</td>
 78         <td>G2</td>
 79         <td><input type="button" value="删除"></td>
 80     </tr>
 81 
 82     <tr>
 83         <td>H1</td>
 84         <td>H2</td>
 85         <td><input type="button" value="删除"></td>
 86     </tr>
 87 
 88     </tbody>
 89 
 90 
 91 </table>
 92 
 93 
 94 
 95 
 96 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 97 <script>
 98     $(function () {
 99         $("thead td input[type=\"button\"]").click(
100            function () {
101                $("tbody tr").remove();
102            }
103         );
104 
105 
106         $("tbody td input[type=\"button\"]").click(function () {
107             $(this).parent().parent().remove();
108         });
109 
110 
111         //为新加入的行绑定删除功能
112         $("tbody").on("click","input[value=\"删除\"]",function () {
113             $(this).parent().parent().remove();
114 
115         });
116 
117 
118         $("input[value=\"添加一条\"]").click(
119             function () {
120                 $(" <tr>\n" +
121                     "        <td>A1</td>\n" +
122                     "        <td>A2</td>\n" +
123                     "        <td><input class='added' type=\"button\" value=\"删除\"></td>\n" +
124                     "    </tr>").appendTo("tbody");
125             }
126         );
127 
128 
129 
130 
131 
132     });
133 </script>
134 
135 </body>
136 </html>

 

posted @ 2019-06-26 18:38  programerfield  阅读(288)  评论(0)    收藏  举报