合並前后效果圖：
完整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>