使用 JS 对 table 对象增加/删除行、列

一:增加行、列

增加行

        // quTableObj是一个table对象
        var quTableObj=quItemBody.find(".quCoItem table.quCoChenTable");
		// 行数
		var rowNum = quTableObj[0].rows.length;
		// 列数
		var colNum = quTableObj[0].rows[0].cells.length;
		// 插入行,注意!此处不能放入循环中,否则会循环增加行
		var newRow= quTableObj[0].insertRow(rowNum);
		// 增加行,循环列添加单元格
		for(var i=0;i<colNum;i++){
			if(i == 0){
				newRow.insertCell(0).innerHTML="增加行";
			}else{
				// 依次向每一行的末尾插入一个新列
				newRow.insertCell(i).innerHTML="1";
			}
		}

增加列

        // 增加列,此处quTableObj是一个table对象
		var quTableObj=quItemBody.find(".quCoItem table.quCoChenTable");
		// 行数
		var rowNum = quTableObj[0].rows.length;
		// 列数
		var colNum = quTableObj[0].rows[0].cells.length;
		// 增加列,循环行添加单元格
		for(var i=0;i<rowNum;i++){
			if(i == 0){
                // 此处增加单元格可以放入循环中
				var content = quTableObj[0].rows[i].insertCell(colNum);
				content.innerHTML="22";
			}else{
				// 依次向每一行的末尾插入一个新列
				var content=quTableObj[0].rows[i].insertCell(colNum);
				content.innerHTML="2";
			}
		}

quTableObj内容

二:再更新一下删除行列的方法:

删除行很简单,只需要获取到当前选中单元格的父( tr ),使用行的remove()方法就可以了

optionParent.remove();

optionParent是 tr 对象

删除列需要做几步:

1:获取当前单元格第几列

2:获取一共多少行(循环删除时用)

3:遍历删除

            var index=$(curEditObj).parents()[0].cellIndex;
			var len = quCoChenTable[0].rows.length; 
		    for(var i = 0;i < len;i++){
		    	quCoChenTable[0].rows[i].deleteCell(index);
		    }

其中quCoChenTable是table对象,table.rows[i].deleteCell[j] 即 删除第 i 行 第 j 列的单元格

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值