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的效果。如果删除第一行原始行,第一列就会没删除,这样问题就来了,如果我保留复制后的 第二行,把原始的第一样删除,那表的格式就会乱掉。我想不允许删除第一行,但是这样做我觉得不是解决问题的办法,各位大神谁有好的建议可以提提,我试一试。
图画完显示总是出问题,见截图。
上一篇: 详解PHP操作MySQL数据库