当前位置:编程学习 > C#/ASP.NET >>

紧急求助,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
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,