合并table行的实现方式页面加载完成后使用js实现动态加入rowspan

最新推荐文章于 2022-12-12 09:00:57 发布

TByoung

最新推荐文章于 2022-12-12 09:00:57 发布

阅读量1.2k

点赞数 4

分类专栏： JS 文章标签： js table合并行 rowspan

本文链接：https://blog.csdn.net/qq_19524879/article/details/96425782

版权

JS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

列表在加载完成后，使用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();
			}
			
		});
	});

合并后的效果如图