合并前效果
合并后效果
下载案例
<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)