利用JQuery获取事件源点击表格内加减号实现添加删除一行输入框

自己是小白，最近做项目要实现加减号生成表格，就硬写了js实现该功能，前提是引入JQuery，bootstrap；如下

1 <link rel="stylesheet" href="bootstrap.min.css">
2 <script src="bootstrap.min.js"></script>
3 <script src="jquery.min.js"></script>

在给+-号设置点样式：

 1  .addInputReturn{
 2                 background:#2ac476 ;
 3                 border-radius: 30%;
 4                 color: white;
 5                 font-size: large;
 6             }
 7             .addInputReturn:hover,.delInput:hover{
 8                 color: white;
 9             }
10             .delInput{
11                 background-color: #f50;
12                 border-radius: 30%;
13                 color: white;
14                 font-size: large;
15             }

html 页面代码如下，td要记得加class类名  是通过类名获取的：

 1  <table class="table table-striped table-bordered table-hover" id="sample-table">
 2                 <thead>
 3                     <tr>
 4                         <th>  </th>
 5                         <th>配件编号</th>
 6                         <th>配件名称</th>
 7                         <th>配件数量</th>
 8                         <th>配件总价</th>
 9                         <th>已领取数量</th>
10                         <th>状态</th>
11                     </tr>
12                 </thead>
13                 <tbody>
14                     <tr>
15                         <td><a href="javascript:;" class="addInputReturn" >
16                             <span class="glyphicon" >十</span>
17                         </a></td>
18                         <td class="td"><input type="text"></td>
19                         <td class="td"><input type="text"></td>
20                         <td class="td"><input type="text"></td>
21                         <td class="td"><input type="text"></td>
22                         <td class="td"><input type="text"></td>
23                         <td class="td"><input type="text"></td>
24                     </tr>
25                     
26                 </tbody>
27             </table>

 页面效果图：

 要实现的点击加号生成一行相同的格式如下图：

以下是JQuery代码；通过点击事件，获取事件源，遍历生成新的表格：

 1 /***********    加减生成表格     ******************** */
 2 $('document').ready(function () {
 3     //先获取table,点击class = addInputReturn的 按钮,执行后面的函数
 4     $("#sample-table").on('click', '.addInputReturn', function () {
 5          /*var td=$("table").children("tbody").html();*/
 6 
 7         //添加减号
 8         /*var th = $("table").children("thead").children("tr").children("th").length-1;*/
 9         var del = "";
10         del += '<a href="javascript:;" class="delInput" >';
11         del += '<span class="glyphicon">一</span>';
12         del += '</a>';
13         $(this).parent().append(del);
14         //去除加号
15         this.remove();
16 
17         var html = "";
18         html +='<tr><td>' +
19             '<a href="javascript:;" class="addInputReturn" >' +
20             '<span class="glyphicon" >十</span>' +
21             '</a>' +
22             '</td>';
23 
24         var td = $('tbody tr:first-child .td').each(function () {
25             html +='<td class="td">';
26             html += $(this).html();
27             html +='</td>';
28 
29         });
30         // var td = $(".td")[0];
31         // console.log(td);
32 
33 
34 
35         /*html += '<tr><td><a href="javascript:;" class="addInputReturn" >';
36         html += '<span class="glyphicon">十</span> </a></td>';
37         var tabletext='<td><input type="text"></td>';
38         for (var i=0;i<th;i++){
39             html+=tabletext;
40         }
41         html += '</tr>';*/
42 
43 
44         // html += td;
45         // html +='</td>';
46         html +='</tr>';
47         $("#sample-table").append(html);
48     });
49     /********表格生成结束*******/
50 
51 
52     $("body").on('click', '.delInput', function () {
53         //获取当前点击的元素的父级的父级进行删除
54         $(this).parent().parent().remove();
55     });
56 });

这样就好了，很好理解   但是中间出了不少问题记录一下。