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

最新推荐文章于 2021-08-17 14:07:36 发布

转载最新推荐文章于 2021-08-17 14:07:36 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/maojindaoGG/blog/1605195

本文介绍了一种使用HTML和jQuery实现动态表格增删的方法。通过克隆预设的表格模板，实现快速添加新行，并自动调整输入框状态，同时加入删除按钮实现行的移除。此外还提供了一个在原有产品基础上添加新产品的示例。

2019独角兽企业重金招聘Python工程师标准>>>

简介：

1、隐藏一个模板；

2、使用clone方法；

3、修改clone后的代码；

详细过程：

1、html代码

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页面

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();
}

转载于:https://my.oschina.net/maojindaoGG/blog/1605195