jquery 动态添加一行数据，支持动态删除

简介：

1、隐藏一个模板；

2、使用clone方法；

3、修改clone后的代码；

详细过程：

1、html代码

<tr id="templateTr" style="display: none;"> <td>联系人</td> <td><input type="text" name="conName" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>部门</td> <td><input type="text" name="conDepart" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>联系电话</td> <td><input type="text" name="conTel" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td>邮箱</td> <td><input type="text" name="conEmail" disabled="disabled" style="border: 0; background: #fff;box-shadow: none;cursor:text;" class="form-control" ></td> <td><button type="button" class="button2 delrow">删除</button></td> </tr>

2、jquery 方法

//增加联系人 addRow():any{ var $tr = $('#templateTr').clone(true); $tr.attr('id',''); $(".button2.delrow").click(function(){ var $del_tr = $(this).parents("tr"); $del_tr.remove(); }); $('#tab_relInfors tbody').append($tr);//在table表动态添加 $tr.show(); }

3、html页面

<h5>联系方式 <span><button type="button" class="button2 addrow" (click)="addRow()" disabled id="btn_add1" style="margin-left: 50px;margin-right: 28px;">增加</button></span> </h5>

4、一个在原来产品基础上添加产品的添加，主要功能是在原来的序号的基础上，序号动态增长，可以作为参考；

//新增产品 addProductRow():any{ let thiss = this; var $protr=$('#productTemplate').clone(true); $protr.attr('id',''); $(".button2.delrow").click(function(){ var $del_tr = $(this).parents("tr"); $del_tr.remove(); }); if('tbo_hasnopros'==$('#tab_relProducts tbody').attr("id")) { if($('#tab_relProducts tbody tr td').text()=='暂无信息') { $('#tab_relProducts tbody tr').remove(); thiss.orderNum=0; } }else{ thiss.orderNum=$('#tab_relProducts tbody tr:last td:first').text(); } thiss.orderNum++; $protr[0].childNodes[1].innerHTML=thiss.orderNum; $('#tab_relProducts tbody').append($protr); $protr.show(); }