欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS 添加行删除行附带样式

程序员文章站 2022-05-17 22:16:06
...


  最近在做一个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的效果。如果删除第一行原始行,第一列就会没删除,这样问题就来了,如果我保留复制后的 第二行,把原始的第一样删除,那表的格式就会乱掉。我想不允许删除第一行,但是这样做我觉得不是解决问题的办法,各位大神谁有好的建议可以提提,我试一试。

  

 图画完显示总是出问题,见截图。JS 添加行删除行附带样式
            
    
    博客分类: JavaScript js添加行删除行样式style