表格添加、删除行通用方法

对普通表格最后一行或中间行,表格里存在合并单元格等等进行添加、删除行。

本人把我所有遇到过的及能想到的情况都测试了,完全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('无法删除!')
	  	}
	  }


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值