zoukankan      html  css  js  c++  java
  • 表格合并续篇之全自动检索

    先看合并前后效果图:

    完整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>
  • 相关阅读:
    宽带手记
    adb的logcat使用
    项目经理
    小A老空调需求管理小记
    作为一个项目经理你关注的是什么
    技术采撷
    项目的落地目标
    和我一起使用postcss+gulp进行vw单位的移动端的适配
    高级程序设计第十三章,简单的事件捕获事件冒泡整理
    javascript高级程序设计第二章知识点提炼
  • 原文地址:https://www.cnblogs.com/xtreme/p/6524131.html
Copyright © 2011-2022 走看看