JQuery合并相邻单元格

来源：互联网发布：sql server count 1 编辑：程序博客网时间：2024/06/05 04:52

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>

0 0