表格合并之表头分级合并
合并前后效果图：
完整demo：
<!DOCTYPE HTML>
<html>
<head>
<title>table.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="">
body{
padding: 5px;
}
.tb-content {
color: #666666;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.tb-content>thead>tr>td{
text-align: center;
}
.tb-content>thead>tr th {
text-align: center;
}
.tb-content>thead>tr:nth-child(1) th {
color: #000000;
text-align: center;
background: #efefef;
}
.table>thead>tr>th, .table>tbody>tr>th,
.table>tfoot>tr>th, .table>thead>tr>td,
.table>tbody>tr>td, .table>tfoot>tr>td{
vertical-align: middle;
}
</style>
</head>
<body>
<table id="combonTb" class="tb-content table table-striped table-hover table-bordered">
<thead>
<tr>
<th>属性</th><th>属性</th><th>属性</th><th>属性</th>
<th>塔高</th><th>塔高</th><th>塔高</th><th>塔高</th><th>塔高</th><th>塔高</th>
<th>站址类型</th><th>站址类型</th><th>站址类型</th><th>站址类型</th>
<th>站址</th><th>站址</th>
<th>详情</th>
</tr>
<tr>
<th>系统</th><th>表</th><th>表</th><th>表</th>
<th>塔编码</th><th>塔编码</th><th>塔名</th><th>塔名</th><th>塔身</th><th>塔身</th>
<th>站编码</th><th>站编码</th><th>站名</th><th>站名</th>
<th>站名</th><th>站名</th>
<th></th>
</tr>
<tr>
<th>ios</th><th>ios</th><th>ios</th><th>table</th>
<th>11</th><th>12</th><th>14</th><th>14</th><th>14</th><th>14</th>
<th>code_a</th><th>code_a</th><th>code_b</th><th>code_a</th>
<th>铁塔</th><th>铁塔</th>
<th></th>
</tr>
</thead>
</table>
<button onclick="headRowspan('#combonTb')">合并head</button>
</body>
<script>
/**
* 合并头，上一行的分组会约束下一行的分组（类似公司、部门、小组这种隶属层级约束）
* 思路：建立分组索引，索引含有该分组的起始坐标（用于jquery的切片选取操作$(selecter).slice(index,indexEnd)）
* 合并当前行时，同时建立新的分组索引，用于下一行分组。
*/
function headRowspan(selecter,bool){
var indexsArray = [],/*分组信息*/ headTRs = $(selecter).find("thead>tr");
if(bool == true) $(selecter).find("thead>tr:last").hide();
$.each(headTRs,function(index,trItem){
var innerIndexsArray = [],ths = $(trItem).children();
if(indexsArray.length>0){
$.each(indexsArray,function(n,m){
var segmentTHs = ths.slice(m.pre,m.end+1),tempIndexArray = [];
tempIndexArray = combinTH(segmentTHs,m.pre);
$.each(tempIndexArray,function(indx,jsonItem){/*构建新的分组索引*/
innerIndexsArray.push(jsonItem);
});
});
indexsArray = innerIndexsArray;
}else indexsArray = combinTH(ths,0);
});
var count = headTRs.eq(0).children().size()-1,preTd = null;
for(var i=count;i>=0;i--){/*纵向合并*/
$.each(headTRs,function(index,trItem){
var curTd = $(trItem).children().eq(i);
if(index == 0){
preTd = curTd;
}else{/*只对显示的单元设置合并属性，应再判断上下两个td的colspan是否相同，不同不应该合*/
var preTxt = preTd.text(),curTxt = curTd.text();
if(curTxt && preTxt==curTxt && preTd.is(":visible")){
var rowNum = (preTd.attr("rowspan") || 1)-0;
preTd.attr("rowspan",rowNum+1);
curTd.hide();
}else{
preTd = curTd;
}
}
});
}
function combinTH(ths,baseIndex){/*横向合并*/
var indexsArray = [],preTH = null;
$.each(ths,function(n,m){
if(n==0){
preTH = $(m);
indexsArray.push({pre:baseIndex+0,end:baseIndex+0});
}else{
var preTxt = preTH.text(),curTH = $(m),curTxt = curTH.text();
if(preTxt && preTxt==curTxt){
var indexObj = indexsArray[indexsArray.length-1];
indexObj.end += 1;
var colspanNum = indexObj.end - indexObj.pre + 1;
preTH.attr("colspan",colspanNum);
curTH.hide();
}else{
preTH = $(m);
indexsArray.push({pre:baseIndex+n,end:baseIndex+n});
}
}
});
return indexsArray;
}
}
</script>
</html>
