表格删除列

html部分

<table id="billTbale"></table>

js部分

tableDelCol(event) {
	//被点击的列索引
	let cellIndex = event.target.parentNode.parentNode.cellIndex
	//获取表格
	let table = document.getElementById("billTbale");
	//列长度
	let columnLength = table.rows[1].cells.length;
	//一次循环为一行
	for (var i = 0; i < table.rows.length; i++) {
		let colSpanNum = 0, //累计每行所占单元格
			count = 0, //累计当前为第几个单元格
			isovertr = true //用于进入循环
		//一次循环为一个单元格
		let cellsLength = table.rows[i].cells.length
			for (var j = 0; j < cellsLength; j++) {
				if (isovertr) {
					let colSpan = table.rows[i].cells[j].colSpan
					if ((colSpan > cellIndex && colSpan != 2) || colSpanNum >= cellIndex) {
						if (table.rows[i].cells[j].colSpan > 1) {
							//当单元格不止占一格时,将colSpan减1
							table.rows[i].cells[j].colSpan -= 1
							isovertr = false //用于跳出循环
						} else {
							if (count == 0) { //不存在累计时(即前面没有合并单元格时)
								table.rows[i].deleteCell(cellIndex); //删除指定索引的单元格
							} else {
								//当此单元格不允许被删除时
								if (table.rows[i].cells[j].className == 'nodel') { 
									//循环当前单元格所在行
									for (var k = 0; k < cellsLength; k++) {
										//从倒数开始处理单元格
										if (table.rows[i].cells[cellsLength - k - 1].colSpan >1 && isovertr) { 
												table.rows[i].cells[cellsLength - k - 1].colSpan -= 1
												isovertr = false 
									}
				 				}
							} else {
								 table.rows[i].deleteCell(count); //删除单元格
									}
								}
								isovertr = false //用于跳出循环
							}
						} else {
							colSpanNum += colSpan //当前累计单元格
							count++
							if (colSpanNum > cellIndex) {
								//当当前单元格只占一格时
								if (colSpan == 1) {
									//当单元格只占一格时,直接delete
									table.rows[i].deleteCell(count);
									isovertr = false //用于跳出循环
								} else {
									//当单元格不止占一格时,将colSpan减1
									table.rows[i].cells[j].colSpan -= 1
									isovertr = false //用于跳出循环
								}
							}
						}
					}
				}
			}
		},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值