最近實現了一個個人績效計劃的需求，要求實現一個能夠手動增加或者減少行合併的功能

就是填寫一個主考核項，然後有多個子考核項。

下面是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選擇器使用案例

共同進步