jquery实现table根据数据实现增加或者减少“行合并”rowspan

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wobuaizhi/article/details/83243465

最近实现了一个个人绩效计划的需求，要求实现一个能够手动增加或者减少行合并的功能

就是填写一个主考核项，然后有多个子考核项。

下面是html和js部分代码

<table id="first0" cellspacing="0" border="1" class="valueTable">
	<tr>
		<td width="50px"></td>
		<td >评价项</td>
		<td >评价项权重(%)</td>
		<td >评价指标</td>
		<td >评价指标权重(%)</td>
		<td >操作</td>
	</tr>
	<tr id='firstTR'>
		<td rowspan="1" width="50px">1</td>
		<td rowspan="1" ><textarea name="PJX"></textarea></td>
		<td rowspan="1" ><textarea style='text-align: center;' name="PJXWeight"></textarea></td>
		<td><textarea name="PJXIndicator"></textarea></td>
		<td><textarea style='text-align: center;' name="PJXIndicatorWeight"></textarea></td>
		<td width="100px" >
			<button id="deleteRow" onClick="deleteRow(this)">删除</button> 
			<button id="addRow"onClick="addRow(this)">添加</button>
		</td>
	</tr>
</table>

var PJX = 1;//起始绩效评价项
	//增加div
	function addPJX() {
		PJX += 1;
		var addContent = "<div>"
			+ "<table id='first" + PJX + "' cellspacing='0' class='valueTable'  border='1'   style='border:1px solid #e5ebe9'>"
			+ "<tr id='firstTR' style='border:1px solid #e5ebe9;border-top: 1px solid #fff;text-align: center;color: #656c6b;font-size:12px'>"
				+ "<td rowspan='1' width='50px' >" + PJX + "</td>"
					+ "<td rowspan='1' style='padding: 2px;'><textarea name='PJX'></textarea></td>"
					+ "<td rowspan='1' style='padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXWeight'></textarea></td>"
					+ "<td style='padding: 2px;'><textarea name='PJXIndicator'></textarea></td>"
					+ "<td style='padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXIndicatorWeight'></textarea></td>"
					+ "<td  width='100px'><button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='deleteRow' onClick='deleteRow(this)'>"
					+ "删除</button> <button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='addRow' onClick='addRow(this)'>添加</button></td>"
				+ "</tr>"
			+ "</table>"
		+ "</div>";
		var divs = $("#topdiv").children();
		//拼接的位置
		var addWhere = divs[divs.length - 1];
		$(addWhere).append(addContent);
	}

	//增加tr
	function addRow(param) {
		var tds = $(param).parents("tr").children("td");
		//先增加合并行数
		var span = tds[0];
		var spannum = $(span).attr('rowspan');
		var tmpNum = parseInt(spannum);
		for (var i=0; i<3; i++) {
			span = tds[i];
			$(span).attr('rowspan', tmpNum + 1);
		}
		//增加子项内容
		var table =  $(param).parents("table");
		//找到要扩充内容的地方
		var addContentHtml = "<tr style='border:1px solid #e5ebe9'>"
			+ "<td style='padding: 2px;'><textarea name='PJXIndicator'></textarea></td>"
			+ "<td style='padding: 2px;'><textarea style='text-align: center;' name='PJXIndicatorWeight'></textarea></td>"
			+ "<td><button id='deleteRow' onClick='deleteRow(this)'>删除</button></td>"
			+ "</tr>";
		$(table).append(addContentHtml);
	}
	//删除tr
	function deleteRow(param) {
		var ptr = $(param).parents("tr");
		var trId = $(ptr[0]).attr("id");
		var tds = ptr.children("td");
		//先减少合并行数
		var span = tds[0];
		var spannum = $(span).attr('rowspan');
		//如果删除的不是第一行，那么没有rowspan属性
		if (!spannum) {
			var firstTable = $(param).parents("table")[0];
			var tableId = $(firstTable).attr("id");
			//只身下第一个div的最后一行，不允许删除
			if ("first0" == tableId) {
				var firstTR = $(firstTable).find("tr")[1];
			} else {
				var firstTR = $(firstTable).find("tr")[0];
			}
			tds = $(firstTR).children("td");
			span = tds[0];
			spannum = $(span).attr('rowspan');
		}
		var tmpNum = parseInt(spannum);
		if (tmpNum > 1) {//只剩下最后一行，不删除行，删除table
			if (trId) {
				return;
			}
			for (var i=0; i<3; i++) {
				span = tds[i];
				$(span).attr('rowspan', tmpNum - 1);
			}
			//button>td>tr
			$(param).parent().parent().remove();
		} else {
			var table =  $(param).parents("table");
			var tableId = $(table).attr("id");
			//只身下第一个div的最后一行，不允许删除
			if ("first0" == tableId) {
				
			} else {
				$(table).remove();
				PJX = PJX - 1;
			}
		}
		
	}

主要是通过之前说过的jquery获取对象然后进行append。

根据上面的代码可以实现table合并行的增加和减少。

说一下主要的代码部分

  for (var i=0; i<3; i++) {
		span = tds[i];
		$(span).attr('rowspan', tmpNum - 1);
  }

这里拿到td的rowspan属性，然后加1或者减1。

这个是实现的关键。

其他的部分可以自己看看

获取数据的方法和之前写过的文章类似。有兴趣可以看一下jquery选择器使用案例

共同进步