JQuery合併內容相同的相鄰單元格
在項目開發中經常會遇到報表呈現，對於簡單的報表呈現可以利用JQuery自己實現，今天在項目開發中遇到了簡單報表呈現的問題，這裏記錄一下，希望給遇到同樣問題的碼農帶來一點幫助。
| 超級管理員 | 機構人員管理 | 人員崗位變動 |
| 超級管理員 | 機構人員管理 | 員工入職 |
| 超級管理員 | 機構人員管理 | 查詢員工信息 |
| 超級管理員 | 機構人員管理 | 業務機構管理 |
| 超級管理員 | 角色管理 | 角色管理 |
| 超級管理員 | 功能管理 | 功能管理 |
要實現的效果如下表格所示
| 超級管理員 | 機構人員管理 | 人員崗位變動 |
| 員工入職 | ||
| 查詢員工信息 | ||
| 業務機構管理 | ||
| 角色管理 | 角色管理 | |
| 功能管理 | 功能管理 |
<!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>