合并前效果
合并后效果
下载案例
<html>
<head></head>
<body>
<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>
<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>
<table border="1" id="combonTb" class="tb-content table table-striped table-hover table-bordered">
<thead>
<tr>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2019</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
<th>2020</th>
</tr>
<tr>
<th>7</th>
<th>7</th>
<th>7</th>
<th>7</th>
<th>8</th>
<th>8</th>
<th>9</th>
<th>9</th>
<th>10</th>
<th>10</th>
<th>11</th>
<th>11</th>
<th>12</th>
<th>12</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>3</th>
<th>3</th>
<th>4</th>
<th>4</th>
<th>5</th>
<th>5</th>
<th>5</th>
<th>6</th>
<th>6</th>
<th>6</th>
<th>6</th>
</tr>
<tr>
<th>40</th>
<th>50</th>
<th>51</th>
<th>52</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
</tr>
<tr>
<th colspan="5"> 阶段1</th>
<th colspan="8">阶段2</th>
<th colspan="4">阶段3</th>
<th colspan="6">阶段4</th>
<th colspan="9">阶段5</th>
</tr>
</thead>
</table>
<button onclick="headRowspan('#combonTb')">合并head</button>
<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>欢迎分享，（联系QQ/微信：282625252）
