紧急求助,JS动态添加删除数据行信息导致网页奔溃
对于显示在动态显示在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;
}
} --------------------编程问答--------------------
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); --------------------编程问答-------------------- var newTr = tb.insertRow(-1);
换成 var newTr = tb.insertRow(tb.rows.length); --------------------编程问答-------------------- 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 ;
--------------
还要增加什么代码?
--------------------编程问答-------------------- 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++;
}
------------改了后还是一样的结果------------------
操作一:如果是按照顺序自上而下从第一行删除到最后一行,再点添加行,则操作正常
操作二:如果是按照顺序自而下上的删除,再点添加行,则提示网页奔溃 --------------------编程问答-------------------- 求有经验的关注 --------------------编程问答-------------------- id = tb.rows.length;是不是你删除了,造成ID相同所以会网页奔溃
比如,有5行,那么他们的ID是
id1
id2
id3
id4
id5
你从后面删除再添加,id还是正常,但你从前面删除的话,比如你删除两行,再添加,那么尖就会变成
id3
id4
id5
id4
id5
所以你觉得是会有问题的吗?你的ID要么取用一个随机数,要么取最后一个ID的序号+1
希望你能解决。 --------------------编程问答-------------------- 尖=>id
奔泪的五笔 --------------------编程问答-------------------- 经测试代码可以正常运行,楼主浏览器有问题
补充:.NET技术 , ASP.NET