对普通表格最后一行或中间行,表格里存在合并单元格等等进行添加、删除行。
本人把我所有遇到过的及能想到的情况都测试了,完全OK,若有遗漏不满足,欢迎大家共同探讨以便更好的完善!
传值Demo:
js方法:
//表格添加行,删除行通用方法:
/*
* 参数意思:
tabId:表格的id值;
rowNum:添加行,删除行所在行即tr的id值;
tdRows:数组,当添加行时,需要增加某些td的rowSpan时,把这些td的id放在一个数据中,当不需要时,数据为空,即[]
startId:增加行数,各个新增td的id值的起始id值;
hidId:隐藏域的值;
cellArr:数组,新增行td的colSPan数组,默认是增加,删除按钮所在td的colSpan值。存在合并单元格或其他情况时,可按[1,1,2,1]这种格式传参;
*/
//添加行
function addRow(tabId,rowNum,tdRows,startId,hidId,cellArr){
var tab = document.getElementById(tabId);
var rowNum = document.getElementById(rowNum);
if(tdRows.length>0){
for(var i=0; i<tdRows.length; i++){
var tbRow = document.getElementById(tdRows[i]);
tbRow.rowSpan++;
}
}
var hidObj = document.getElementById(hidId);
hidObj.value++;
cells = (!!cellArr ? cellArr.length : rowNum.getElementsByTagName('td')[0].colSpan);
var rowIndex = rowNum.rowIndex;
var tr = tab.insertRow(rowIndex);
var tdId = tab.rows.length*cells + startId
for(var i=0; i<cells; i++){
var td = tr.insertCell();
if(cellArr && cellArr.length>0){
td.colSpan = cellArr[i];
}
td.style.border = '1px solid #000';
td.innerHTML = '<textarea class="textarea1" id='+tdId+' style="width:90%"></textarea>'
tdId++
}
}
//删除行
function deleteRow(tabId,rowNum,tdRows,hidId){
var tab = document.getElementById(tabId);
var rowNum = document.getElementById(rowNum);
var hidObj = document.getElementById(hidId);
var rowIndex = rowNum.rowIndex;
var hidVal = hidObj.value;
if(hidVal>0){
tab.deleteRow(rowIndex-1);
hidObj.value--;
if(tdRows.length>0){
for(var i=0; i<tdRows.length; i++){
var tbRow = document.getElementById(tdRows[i]);
tbRow.rowSpan--;
}
}
}else{
alert('无法删除!')
}
}