Javascript 在同一HTML中向两个不同的表动态添加行
我正在努力向两个不同的表动态添加行。虽然它对第一个表很有效,但我无法对第二个表进行相同的复制。我知道这可能与JS有关,但我无法找出确切的错误 因为不能对不同的元素使用相同的id,所以我在JS中更改了id。我应该使用class而不是id吗?如果是这样的话,我该怎么做呢Javascript 在同一HTML中向两个不同的表动态添加行,javascript,jquery,html,forms,html-table,Javascript,Jquery,Html,Forms,Html Table,我正在努力向两个不同的表动态添加行。虽然它对第一个表很有效,但我无法对第二个表进行相同的复制。我知道这可能与JS有关,但我无法找出确切的错误 因为不能对不同的元素使用相同的id,所以我在JS中更改了id。我应该使用class而不是id吗?如果是这样的话,我该怎么做呢 $(文档).ready(函数(){ $(“#添加#徽章”)。在(“单击”,函数(){ //动态行代码 //获取最大行id并设置新id var-newid=0; $.each($(“#tab_logic tr”),函数(){ if(
$(文档).ready(函数(){
$(“#添加#徽章”)。在(“单击”,函数(){
//动态行代码
//获取最大行id并设置新id
var-newid=0;
$.each($(“#tab_logic tr”),函数(){
if(parseInt($(this.data(“id”))>newid){
newid=parseInt($(this).data(“id”);
}
});
newid++;
var tr=$(“”{
id:“地址”+新id,
“数据id”:newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个($(“#tab#u逻辑体tr:n(0)td”),函数(){
var cur_td=$(本);
var children=cur_td.children();
//添加新的td和元素(如果有nane)
if($(this).data(“name”)!=未定义){
var td=$(“”{
“数据名称”:$(cur_td).data(“名称”)
});
var c=$(cur_td).find($(children[0]).prop('tagName')).clone().val(“”);
c、 属性(“名称”),$(cur_td).data(“名称”)+newid);
c、 附件(元);;
td.附件(元(tr);;
}否则{
var td=$(“”{
“text”:$(“#tab_logic tr”)。长度
})。附件($(tr));
}
});
//添加删除按钮和td
/*
$(“”)。附加(
$("")
。单击(函数(){
$(this).tr.remove();
})
)。附件($(tr));
*/
//添加新行
$(tr).appendTo($('tab#u logic');
$(tr).find(“td-button.row-remove”).on(“单击”,函数(){
$(this).tr.remove();
});
});
//可排序代码
var FIXHELPERMODIFED=函数(e,tr){
var$originals=tr.children();
var$helper=tr.clone();
$helper.children().each(函数(索引){
$(this).width($originals.eq(index.width())
});
返回$helper;
};
$(“.table sortable tbody”).sortable({
帮助者:修改的fixHelperModified
}).disableSelection();
$(“.table可排序thead”).disableSelection();
$(“添加徽章”)。触发(“单击”);
});
$(文档).ready(函数(){
$(“添加层”)。在(“单击”,函数()上{
//动态行代码
//获取最大行id并设置新id
var-newid=0;
$.each($(“#tab_logic tr”),函数(){
if(parseInt($(this.data(“id”))>newid){
newid=parseInt($(this).data(“id”);
}
});
newid++;
var tr=$(“”{
id:“地址”+新id,
“数据id”:newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个($(“#tab#u逻辑体tr:n(0)td”),函数(){
var cur_td=$(本);
var children=cur_td.children();
//添加新的td和元素(如果有nane)
if($(this).data(“name”)!=未定义){
var td=$(“”{
“数据名称”:$(cur_td).data(“名称”)
});
var c=$(cur_td).find($(children[0]).prop('tagName')).clone().val(“”);
c、 属性(“名称”),$(cur_td).data(“名称”)+newid);
c、 附件(元);;
td.附件(元(tr);;
}否则{
var td=$(“”{
“text”:$(“#tab_logic tr”)。长度
})。附件($(tr));
}
});
//添加删除按钮和td
/*
$(“”)。附加(
$("")
。单击(函数(){
$(this).tr.remove();
})
)。附件($(tr));
*/
//添加新行
$(tr).appendTo($('tab#u logic');
$(tr).find(“td-button.row-remove”).on(“单击”,函数(){
$(this).tr.remove();
});
});
//可排序代码
var FIXHELPERMODIFED=函数(e,tr){
var$originals=tr.children();
var$helper=tr.clone();
$helper.children().each(函数(索引){
$(this).width($originals.eq(index.width())
});
返回$helper;
};
$(“.table sortable tbody”).sortable({
帮助者:修改的fixHelperModified
}).disableSelection();
$(“.table可排序thead”).disableSelection();
$(“添加层”)。触发(“单击”);
});代码>
window.jQuery | | document.write(“”)
徽章名称
徽章ID
获得徽章所需的积分
创建新徽章
层名称
层ID
获得该级别所需的积分
创建新层
您已经使用了id=“tab_logic”
两次,请使用diff类。您必须为表使用不同的id选择器作为
对于第一个表id=“tab\u logic1”
和第二个表id=“tab\u logic”
必须创建函数addRows(选择器,数据){}
并使用:
addRows('tab_logic1',data);
addRows('tab_logic2',data);
也不要复制相同的代码。更好地使用函数。在html页面上不能有相同的id。请改用类或使用其他id