JQuery合并相邻单元格

最新推荐文章于 2024-03-17 17:53:20 发布

Brent-CCNU

最新推荐文章于 2024-03-17 17:53:20 发布

阅读量1.5k

点赞数

分类专栏： JQuery 文章标签： jquery 表格合并单元格

本文链接：https://blog.csdn.net/zitong_ccnu/article/details/40074205

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery合并内容相同的相邻单元格

在项目开发中经常会遇到报表呈现，对于简单的报表呈现可以利用JQuery自己实现，今天在项目开发中遇到了简单报表呈现的问题，这里记录一下，希望给遇到同样问题的码农带来一点帮助。

超级管理员	机构人员管理	人员岗位变动
超级管理员	机构人员管理	员工入职
超级管理员	机构人员管理	查询员工信息
超级管理员	机构人员管理	业务机构管理
超级管理员	角色管理	角色管理
超级管理员	功能管理	功能管理

要实现的效果如下表格所示

超级管理员	机构人员管理	人员岗位变动
		员工入职
		查询员工信息
		业务机构管理
	角色管理	角色管理
	功能管理	功能管理

html代码如下所示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery合并表格</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<style text="text/css">
	table{
		border: solid 1px #000;
	}
	table tr td{
		border: solid 1px #000;
	}
</style>
<body>
	<table id="collapse-table">
		<tr>
			<td>超级管理员</td>
			<td>机构人员管理</td>
			<td>人员岗位变动</td>
		</tr>
		<tr>
			<td>超级管理员</td>
			<td>机构人员管理</td>
			<td>员工入职</td>
		</tr>
		<tr>
			<td>超级管理员</td>
			<td>机构人员管理</td>
			<td>查询员工信息</td>
		</tr>
		<tr>
			<td>超级管理员</td>
			<td>机构人员管理</td>
			<td>业务机构管理</td>
		</tr>
		<tr>
			<td>超级管理员</td>
			<td>角色管理</td>
			<td>角色管理</td>
		</tr>
		<tr>
			<td>超级管理员</td>
			<td>功能管理</td>
			<td>功能管理</td>
		</tr>
	</table>
	<script style="text/javascript">
		$(function(){
			mergecells($("#collapse-table"));
		});
		function mergecells(table){
			var cols = $("table tr td").size() / $("table tr").size();
			for(var col = 0; col < cols; col++){
				var that;
				$("table tr").each(function(){
					var cell = $("td:eq("+ col +")", this);
					if(that != null && $(cell).html() == $(that).html()){
						rowspan = $(that).attr("rowSpan");
						if(rowspan == undefined){
							$(that).attr("rowSpan", 1);
							rowspan = $(that).attr("rowSpan");
						}
						rowspan = Number(rowspan)+1;
						$(that).attr("rowSpan", rowspan);
						$(cell).hide();
					}else{
						that = cell;
					}
				});
			}
		}
	</script>
</body>
</html>