合併table行的實現方式頁面加載完成後使用js實現動態加入rowspan

列表在加載完成後，使用JS的方式做table列表合併行。

首先需要用到jquery引用

下面是table的代碼

<table>
      <thead>
		<tr>
			<th>序號</th>
			<th>大類</th>
			<th>小類</th>
			<th>結果</th>
		</tr>
	 </thead>
     <tbody class="tab">
		<tr>
			<td>1</td>
			<td class="row_a">道路</td>
			<td>馬路</td>
			<td>10條</td>
		</tr>
		<tr>
			<td>2</td>
			<td class="row_a">道路</td>
			<td>鐵路</td>
			<td>1條</td>
		</tr>
		<tr>
			<td>3</td>
			<td class="row_a">道路</td>
			<td>高速路</td>
			<td>2條</td>
		</tr>
		<tr>
			<td>4</td>
			<td class="row_b">小區</td>
			<td>C1</td>
			<td>100棟</td>
		</tr>
		<tr>
			<td>5</td>
			<td class="row_b">小區</td>
			<td>C2</td>
			<td>101棟</td>
		</tr>
		<tr>
			<td>6</td>
			<td class="row_c">商場</td>
			<td>金鷹</td>
			<td>1個</td>
		</tr>
		<tr>
			<td>7</td>
			<td class="row_c">商場</td>
			<td>世貿</td>
			<td>2個</td>
		</tr>
	</tbody>
   </table>

下面是js的代碼

$(function(){
	    $(".tab").find("td[class^='row_']").each(function(index,element){
			//獲取每個開始行的class
			var fristClass = $(element).attr("class");
			//獲取所有相同fristClass需要合併行的對象
			var objs = $(".tab").find("."+fristClass);
			//如果獲取對象數量大於等於1說明需要合併
			if(objs.length >=1){
				//設置首行的rowspan
				objs.eq(0).attr("rowspan",objs.length);
				//移除首行的class
				objs.eq(0).removeClass(fristClass);
				//移除本class的其餘行
				$(".tab").find("."+fristClass).remove();
			}
			
		});
	});

合併後的效果如圖