`
tangqi609567707
  • 浏览: 34740 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JS 添加行删除行附带样式

阅读更多


  最近在做一个table的动态添加删除行,可以带有当前行的样式,记录一下。

其中el是在html标签中 onclick="doAddRow(this)"

function doAddRow(el){
el = getParent(el, 'TR'); //TR 是table中的tr,不知道是否区分大小写,有知道的可以说一下哈,没测试过。
var rowIndex = el.rowIndex;
var obj=document.all.tableid;// table 的id
 if (obj==null) return false;
 var rw=document.all.tiaokuan;//tiaokuan是tr的id.
 var nRow=obj.insertRow(rowIndex+1);//向下添加一行,如果为空,默认在最下面添加一行。
 var cel=null;
 for (var i=1; i<rw.cells.length; i++)
 {
   cel=nRow.insertCell();
   cel.innerHTML=rw.cells[i].innerHTML;
   cel.className = rw.cells[i].className;//复制样式
   cel.colSpan = rw.cells[i].colSpan;//复制列所占列数
 }
 //document.getElementById("yjfltk").rowSpan =parseInt(document.getElementById("yjfltk").rowSpan)+1;
 //document.getElementById("qbhsxx").rowSpan =parseInt(document.getElementById("qbhsxx").rowSpan)+1;//我只复制了一样的后两列,所以需要对第一列进行所占的行数+1
 return true;
}

 

 

function doDelRow(el){
el = getParent(el, 'TR'); 
var rowIndex = el.rowIndex; 
el = getParent(el, 'table1'); 
document.all.table1.deleteRow(rowIndex);
document.getElementById("yjfltk").rowSpan =parseInt(document.getElementById("yjfltk").rowSpan)-1;
}

 

function getParent (el, parentTag) {
    do {
        el = el.parentNode; 
    } while (el && el.tagName !== parentTag); 
    return el; 
}

 删除遇到一个问题没有解决:除了第一条原始行外都可以删除,比如说一行四列,我复制的是2,3,4列,对应的第一列实际就是rowspan+n的效果。如果删除第一行原始行,第一列就会没删除,这样问题就来了,如果我保留复制后的 第二行,把原始的第一样删除,那表的格式就会乱掉。我想不允许删除第一行,但是这样做我觉得不是解决问题的办法,各位大神谁有好的建议可以提提,我试一试。

  

 图画完显示总是出问题,见截图。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics