表格合并续篇之全自动检索
先看合并前后效果图：
完整demo：
<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> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type=""> .tb-content { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; table-layout: automatic; width: 99.8%; color: #666666; background-color: #ffffff; border: 1px solid #dddddd; text-align: center; margin-top:0px; padding: 0px; cellspacing: 0px; border-collapse: collapse; } .tb-content td { min-height: 25px; color: #666666; border: 1px dotted #ccc; vertical-align: middle; border-collapse:collapse; padding: 5px; cursor: text; } .tb-content th { text-align: center; min-height: 25px; height: 25px; color: #000000; border: 1px dotted #ccc; vertical-align: middle; background: #efefef; } </style> </head> <body> <table class="tb-content"> <thead> <tr> <th>属性</th><th></th><th></th><th></th><th colspan="10">塔高</th> </tr> <tr> <td>系统\表</td><td></td><td></td><td></td><td colspan="3">塔</td> <td colspan="3">订单</td> <td colspan="3">项目</td> <td rowspan="2">勘误</td> </tr> <tr> <td colspan="4">站</td><td colspan="2">塔编码</td><td>塔高</td> <td colspan="2">订单编码</td> <td>塔高</td> <td colspan="2">项目编码</td> <td></td> </tr> </thead> <tbody> <tr> <td>site_a</td><td>站点A</td><td>广东省</td><td>广州市</td> <td>塔A</td><td>tower_a</td><td>10</td><td>订单A</td> <td>order_a</td><td>11</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>site_a</td><td>站点A</td><td>广东省</td><td>广州市</td> <td>塔B</td><td>tower_b</td><td>11</td><td>订单A</td> <td>order_a</td><td>11</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>site_a</td><td>站点A</td><td>广东省</td><td>广州市</td> <td>塔B</td><td>tower_b</td><td>11</td><td>订单A</td> <td>order_a</td><td>12</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>site_b</td><td>站点B</td><td>广东省</td><td>东莞市</td> <td>塔C</td><td>tower_c</td><td>12</td><td>订单B</td> <td>order_b</td><td>12</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>site_b</td><td>站点B</td><td>广东省</td><td>东莞市</td> <td>塔D</td><td>tower_d</td><td>13</td><td>订单B</td> <td>order_b</td><td>12</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>site_b</td><td>站点B</td><td>广东省</td><td>东莞市</td> <td>塔D</td><td>tower_d</td><td>13</td><td>订单B</td> <td>order_b</td><td>12</td><td></td><td></td><td></td><td></td> </tr> </tbody> </table> <button onclick="rowspan()">合并</button> </body> <script>
/** * 合并思路，先找出能合并的分组，记录所有分组的第一行tr及该分组的起始位置
* （用于切片选取操作：$(selector).slice(index,indexEnd)）； * 对于一个分组的操作，从尾部开始对比该组同一位置的td，判断是否相同，决定合并与否。 **/ function rowspan(){ var keyIndexs = [0,1],/*索引td的规则*/ joinKeyArray=[], bodyTRs = $(".tb-content>tbody>tr"), firstTRs = []; /* 初始化合并数据 */ $.each(bodyTRs,function(index,item){/*tr分组，只记录同组tr的首行和起始位置*/ var tds = $(item).children(),joinKey=""; $.each(keyIndexs,function(n,item){ joinKey += tds.eq(item).text()+"^"; /*td取法要随keyIndes规则变更*/ }); if($.inArray(joinKey,joinKeyArray)<0){ joinKeyArray.push(joinKey); var trJSON = {pre:index, trObj:item}; if(firstTRs.length>0) firstTRs[firstTRs.length-1].end = index-1; firstTRs.push(trJSON); } if(firstTRs.length>0) firstTRs[firstTRs.length-1].end = index; }); $.each(firstTRs,function(index,item){ /*合并td*/ var tr = $(item.trObj), firstLineTDs = tr.find("td"), tdCount = firstLineTDs.size()-1; if(item.end-item.pre>0){/*判断是否存在合并情况*/ var segmentTRs = bodyTRs.slice(item.pre,item.end+1); for(var i = tdCount;i>=0;i--){ var tdStack = [] $.each(segmentTRs,function(n,m){/*同组tr的同位置td分组，只记录同组td的首行和起始位置*/ var currentTd = $(m).find("td").eq(i); var tdJSON = {pre:n,obj:currentTd}; if(tdStack.length>0){ tdStack[tdStack.length-1].end = n; preTd = tdStack[tdStack.length-1],preTdTxt = preTd.obj.text(),curTdTxt = currentTd.text(); if(preTdTxt && preTdTxt==curTdTxt){ var rowNum = preTd.end - preTd.pre+1; preTd.obj.attr("rowspan",rowNum); currentTd.remove(); }else if(preTdTxt && preTdTxt!=curTdTxt){ tdStack.push(tdJSON); } }else{ tdStack.push(tdJSON); } if(tdStack.length>0) tdStack[tdStack.length-1].end = n; }); } } }); } </script> </html>
