紧急求助，JS动态添加删除数据行信息导致网页奔溃

[chenchen_2011]

对于显示在动态显示在Table中的数据
操作一：如果是按照顺序自上而下从第一行删除到最后一行，再点添加行，则操作正常
操作二：如果是按照顺序自而下上的删除，再点添加行，则提示网页奔溃

JS控制函数
添加行函数：
var id;
//添加收费项目
function addTr() {
//获得表格对象
var tb = document.getElementById('PartItem');
id = tb.rows.length;
//添加一行
var newTr = tb.insertRow(-1); //在最下的位置

//给这个行设置id属性，以便于管理（删除）
newTr.id = 'PartItem' + id;

//添加两列
var newTd0 = newTr.insertCell(0);
var newTd1 = newTr.insertCell(1);
var newTd2 = newTr.insertCell(2);
var newTd3 = newTr.insertCell(3);
var newTd4 = newTr.insertCell(4);


//设置列内容和属性
newTd0.innerHTML = "<td>" + id + "</td>";
newTd1.innerHTML = "<td ><a href=\"javascript:void(0)\" onclick=\"moveTr('" + id + "','PartItem');\" >删除</a></td>";
newTd1.innerHTML += "<input style=\"display:none\" name='SFXMV' type='text' value='-1' />";
newTd2.innerHTML = "<td><input style=\"width: 80px\" name='SFXMV' type='text' /></td>";
newTd3.innerHTML = "<td><input style=\"width: 200px\" name='SFXMV' type='text' /></td>";
newTd4.innerHTML = "<td><input style=\"width: 80px\" name='SFXMV' type='text' value='0' /></td>";
id++;
}


删除行函数：
function moveTr(id, tableid) {
//获得表格对象(注意此处是表格对象Table，如果用到了thead和tbody，而取的是tbody的对象的话，删除行时需要考虑索引问题，行索引是针对整体，而如果获取的是tbody对象，删除时需要的索引是针对tbody自身，所以一定要减去thead的行数，切记切记，否则就会异常)
var tb = document.getElementById(tableid);
//根据id获得将要删除行的对象
var tr = document.getElementById(tableid + id);
//取出行的索引，设置删除行的索引
tb.deleteRow(tr.rowIndex);
tt(tableid);
//清空列表，移除全部行的方法
//while(tb_show.hasChildNodes()){
//tb_show.deleteRow();
//}
}
function tt(tableid) {
var table1 = document.getElementById(tableid);
var rows = table1.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].cells[0].innerText = i;
}
}

[c02645]

newTd0.innerHTML = "<td>" + id + "</td>"; newTd1.innerHTML = "<td ><a href=\"javascript:void(0)\" onclick=\"moveTr('" + id + "','PartItem');\" >删除</a></td>"; newTd1.innerHTML += "<input style=\"display:none\" name='SFXMV' type='text' value='-1' />"; newTd2.innerHTML = "<td><input style=\"width: 80px\" name='SFXMV' type='text' /></td>"; newTd3.innerHTML = "<td><input style=\"width: 200px\" name='SFXMV' type='text' /></td>"; newTd4.innerHTML = "<td><input style=\"width: 80px\" name='SFXMV' type='text' value='0' /></td>"; 换成 newTd0.innerHTML = id ; newTd1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"moveTr('" + id + "','PartItem');\" >删除</a>"; newTd1.innerHTML += "<input style=\"display:none\" name='SFXMV' type='text' value='-1' />"; newTd2.innerHTML = "<input style=\"width: 80px\" name='SFXMV' type='text' />"; newTd3.innerHTML = "<input style=\"width: 200px\" name='SFXMV' type='text' />"; newTd4.innerHTML = "<input style=\"width: 80px\" name='SFXMV' type='text' value='0' />"; var newTr = tb.insertRow(-1); 换成 var newTr = tb.insertRow(tb.rows);

[c02645]

var newTr = tb.insertRow(-1); 换成 var newTr = tb.insertRow(tb.rows.length);

[chenchen_2011]

c02645，还在吗？ 1楼的回帖 var newTr = tb.insertRow(-1); 换成 var newTr = tb.insertRow(tb.rows); 与2楼的回帖 var newTr = tb.insertRow(-1); 换成 var newTr = tb.insertRow(tb.rows.length); 没弄明白 -------------- newTd0.innerHTML = "<td>" + id + "</td>"; 换成 newTd0.innerHTML = id ; -------------- 还要增加什么代码？

[chenchen_2011]

function addTr() { //获得表格对象 var tb = document.getElementById('PartChargeItem'); id = tb.rows.length; //添加一行 // var newTr = tb.insertRow(-1); //在最下的位置 var newTr = tb.insertRow(tb.rows.length); //给这个行设置id属性，以便于管理（删除） newTr.id = 'PartChargeItem' + id; // newTr.align = 'center'; //添加两列 var newTd0 = newTr.insertCell(0); var newTd1 = newTr.insertCell(1); var newTd2 = newTr.insertCell(2); var newTd3 = newTr.insertCell(3); var newTd4 = newTr.insertCell(4); //设置列内容和属性 newTd0.innerHTML = id ; newTd1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"moveTr('" + id + "','PartChargeItem');\" >删除</a>"; newTd1.innerHTML += "<input style=\"display:none\" name='SFXMV' type='text' value='-1' />"; newTd2.innerHTML = "<input style=\"width: 80px\" name='SFXMV' type='text' />"; newTd3.innerHTML = "<input style=\"width: 200px\" name='SFXMV' type='text' />"; newTd4.innerHTML = "<input style=\"width: 80px\" name='SFXMV' type='text' value='0' />"; id++; } ------------改了后还是一样的结果------------------ 操作一：如果是按照顺序自上而下从第一行删除到最后一行，再点添加行，则操作正常 操作二：如果是按照顺序自而下上的删除，再点添加行，则提示网页奔溃

[chenchen_2011]

求有经验的关注

[c02645]

id = tb.rows.length;是不是你删除了，造成ID相同所以会网页奔溃 比如，有5行，那么他们的ID是 id1 id2 id3 id4 id5 你从后面删除再添加，id还是正常，但你从前面删除的话，比如你删除两行，再添加，那么尖就会变成 id3 id4 id5 id4 id5 所以你觉得是会有问题的吗？你的ID要么取用一个随机数，要么取最后一个ID的序号+1 希望你能解决。

[c02645]

尖=>id 奔泪的五笔

[Hello World,]

经测试代码可以正常运行，楼主浏览器有问题