jquery插入复杂表格，合并行列

此方法为个人测试所写，针对各种兼容性问题还未测试，初写的目的是easyui复杂表头有些缺陷，比如某个表头合并两列，

在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ，不过闲来无事 自己写了写jquery，下面进入正题

先展示下效果

指标性选择为 表头的隐藏用 （客户要求可自定义表头，在extjs中表单自带这个功能,不过复杂表头好像也不支持，单行表头判断条件少的多，比较好实现）

从图片中 可以看到 复杂表头，数据自动合并列，某列比值变红，自定义变红 等功能实现，下面逐步展示代码

 <div id="Zj" style="width: auto;">
         <asp:CheckBoxList ID="ZjCheck" runat="server" Font-Size="Small">
             <asp:ListItem Value="30MW" Text="30MW"></asp:ListItem>
             <asp:ListItem Value="60MW" Text="60MW"></asp:ListItem>
             <asp:ListItem Value="20MW" Text="20MW"></asp:ListItem>
             <asp:ListItem Value="其他" Text="其他"></asp:ListItem>
         </asp:CheckBoxList>
     </div>
     <div id="Tx" style="width: auto;">
         <asp:CheckBoxList ID="TxCheck" runat="server" Font-Size="Small">
             <asp:ListItem Value="湿法脱硫" Text="湿法脱硫"></asp:ListItem>
             <asp:ListItem Value="60MW" Text="干法脱硫"></asp:ListItem>
             <asp:ListItem Value="20MW" Text="循环流化床"></asp:ListItem>
         </asp:CheckBoxList>
     </div>
     <div id="TL" style="width: auto;">
         <asp:CheckBoxList ID="TLCheck" runat="server" Font-Size="Small">
             <asp:ListItem Value="湿法脱硫" Text="SCR"></asp:ListItem>
             <asp:ListItem Value="60MW" Text="LNB+SCR"></asp:ListItem>
         </asp:CheckBoxList>
     </div>
     <div id="TreeHeaddiv" style="width: 240px; left: 830px;">
         <ul id="TreeHead" class="ztree">
         </ul>
     </div>

         <div id="panel" class="easyui-panel" title="查询条件" style="width: 1100px; padding: 10px; margin-bottom:20px;">
             <div style="float: left">
                 <label id="Label1" runat="server" for="dateD">
                     起始时间：</label>
                 <input type="text" id="dateSatar" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'#F{$dp.$D(\'dateEdd\')}',dateFmt:'yyyy-MM-dd'})"
                     class="Wdate" /> 至
                     <input type="text" id="dateEdd" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d', minDate:'#F{$dp.$D(\'dateSatar\')}',dateFmt:'yyyy-MM-dd'})"
                     class="Wdate" />
                 <a href="javascript:void(0)" id="btnJZ" class="easyui-linkbutton" onclick="showMenu('btnJZ','Zj')">
                     机组容量</a> <a href="javascript:void(0)" id="btnTL" class="easyui-linkbutton" onclick="showMenu('btnTL','TL')">
                         脱硫方式</a> <a href="javascript:void(0)" id="btnTX" class="easyui-linkbutton" onclick="showMenu('btnTX','Tx')">
                             脱销方式</a> <a href="javascript:void(0)" id="btnItem" class="easyui-linkbutton" onclick="showMenu('btnItem','TreeHeaddiv')">
                                 指标项选择</a>
             </div>
             <div style="float: right;">
                 <a href="javascript:void(0)" id="Serach" class="easyui-linkbutton">查询</a>
             </div>
         </div>
         <div style="width:1100px">
         <table id="table">
             <thead id="thead">
                 <tr>
                     <td rowspan="3" style=" width:40px;">
                         序号
                     </td>
                     <td rowspan="3" style=" width:132px;">
                         二级公司/机组名称
                     </td>
                     <td rowspan="2">
                         所属火电机组台数
                     </td>
                     <td rowspan="2">
                         所属火电机组容量
                     </td>
                     <td colspan="6" style=" width:390px;">
                         脱硫系统运行情况
                     </td>
                      <td colspan="6" style=" width:390px;">
                         脱硝系统运行情况
                     </td>
                 </tr>
                 <tr>
                     <td  >
                         投运率
                     </td>
                     <td>
                         综合效率
                     </td>
                     <td>
                         停运次数
                     </td>
                     <td>
                         停运台均次
                     </td>
                     <td>
                         停运时间
                     </td>
                     <td>
                         停运台均时间
                     </td>
                      <td >
                         投运率
                     </td>
                     <td>
                         综合效率
                     </td>
                     <td>
                         停运次数
                     </td>
                     <td>
                         停运台均次
                     </td>
                     <td>
                         停运时间
                     </td>
                     <td>
                         停运台均时间
                     </td>
                 </tr>
                 <tr class="lasttr">
                     <td>
                         台
                     </td>
                     <td>
                         MW
                     </td>
                     <td>
                         %
                     </td>
                     <td>
                         %
                     </td>
                     <td>
                         次
                     </td>
                     <td>
                         次/台
                     </td>
                     <td>
                         小时
                     </td>
                     <td>
                         小时/台
                     </td>
                      <td>
                         %
                     </td>
                     <td>
                         %
                     </td>
                     <td>
                         次
                     </td>
                     <td>
                         次/台
                     </td>
                     <td>
                         小时
                     </td>
                     <td>
                         小时/台
                     </td>
                 </tr>
             </thead>

         </table>
         </div>
     </div>

web页面布局

指标性按钮针对的tree的绑定

var Theadsetting = {
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {

        onCheck: onCheck
    }

};

TreeSetting

   var zNodes = [
            { id: 1, pId: 0, name: "全选", open: true },
         ///脱硫情况
             {id: "SO", pId: 1, name: "脱硫系统运行情况", open: true },
             { id: "4", pId: "SO", name: "投运率" },
             { id: "5", pId: "SO", name: "综合效率" },
             { id: "6", pId: "SO", name: "停运次数" },
             { id: "7", pId: "SO", name: "停运台均次" },
             { id: "8", pId: "SO", name: "停运时间" },
             { id: "9", pId: "SO", name: "停运台均时间" },

         ///脱硝系统运行情况
            {id: "No", pId: 1, name: "脱硝系统运行情况", open: true },
             { id: "10", pId: "No", name: "投运率" },
             { id: "11", pId: "No", name: "综合效率" },
             { id: "12", pId: "No", name: "停运次数" },
             { id: "13", pId: "No", name: "停运台均次" },
             { id: "14", pId: "No", name: "停运时间" },
             { id: "15", pId: "No", name: "停运台均时间" }
             ];

treeNode

//表头节点点击事件
function onCheck(e, treeId, treeNode) {

    ItemHide(GetMultItemValues("TreeHead"));
}

treeNode点击事件

 //隐藏表格
        function ItemHide(NodeIs) {

            $("#thead tr").eq(0).find("td").eq(4).attr("colspan", 6);
            $("#thead tr").eq(0).find("td").eq(4).css("width", 390);
            $("#thead tr").eq(0).find("td").eq(5).attr("colspan", 6);
            $("#thead tr").eq(0).find("td").eq(5).css("width", 390);
            $("#table tr  td").show();
            //            Merge();

            for (var i = 0; i < NodeIs.length; i++) {

                for (var j = 0; j < $("#thead tr").length; j++) {
                    if (j == 0) {

                        if (NodeIs[i] > 3 && NodeIs[i] <= 9) {
                            $("#thead tr").eq(0).find("td").eq(4).attr("colspan", $("#thead tr").eq(0).find("td").eq(4).attr("colspan") - 1);
                            $("#thead tr").eq(0).find("td").eq(4).css("width", parseInt($("#thead tr").eq(0).find("td").eq(4).css("width")) - 65);
                        } else {
                            $("#thead tr").eq(0).find("td").eq(5).attr("colspan", $("#thead tr").eq(0).find("td").eq(5).attr("colspan") - 1);
                            $("#thead tr").eq(0).find("td").eq(5).css("width", parseInt($("#thead tr").eq(0).find("td").eq(5).css("width")) - 65);
                        }

                        if ($("#thead tr").eq(0).find("td").eq(4).attr("colspan") == 0) {
                            $("#thead tr").eq(0).find("td").eq(4).hide();
                        }
                        if ($("#thead tr").eq(0).find("td").eq(5).attr("colspan") == 0) {
                            $("#thead tr").eq(0).find("td").eq(5).hide();
                        }

                    } else if (j == 1) {
                        $("#thead tr").eq(j).find("td").eq(NodeIs[i] - 4).hide();
                    } else {
                        $("#thead tr").eq(j).find("td").eq(NodeIs[i] - 2).hide();
                    }

                }
                for (var j = 0; j < $("#tbody tr").length; j++) {
                    $("#tbody tr").eq(j).find("td").eq(NodeIs[i]).hide();
                }
            }
        }

隐藏表格的方法

tree绑定

 $(function () {
            $.fn.zTree.init($("#TreeHead"), Theadsetting, zNodes);
        });

表格 数据绑定

 var json = [];

            //异地数据
            $.post("GetData.aspx", { name: "CHJ" }, function (data) {

                json = $.parseJSON(data);

                ///填充数据
                var str = "";

                for (var i = 0; i < json.length; i++) {
                    var tr = "<tr><td style='width:40px'>" + i + "</td>";
                    for (var j = 0; j < json[i].length; j++) {
                        tr += "<td>" + json[i][j] + "</td>";
                    }
                    tr += "</tr>";
                    str += tr;
                }
                $("#tbody").append(str);

                Merge();
                Bgcolcor();

                //tr点击变色
                for (var i = 0; i <= $("#tbody tr").length; i++) {

                    var tr = $("#tbody tr").eq(i);
                    tr.click(function () {
                        $("#tbody tr").removeClass("click");
                        Bgcolcor();
                        $(this).removeClass("trtwobgcolor");
                        $(this).addClass("click");
                    })
                }

                //比对变红
                for (var i = 0; i < $("#tbody tr").length; i++) {

                    var textone = $("#tbody tr").eq(i).find("td").eq(5).text();
                    var texttwo = $("#tbody tr").eq(i).find("td").eq(6).text();
                    if (parseFloat(textone) < parseFloat(texttwo)) {
                        var textone = $("#tbody tr").eq(i).find("td").eq(5).html("<b style='color:red;'>" + textone + "</b>");
                    }
                }

            });

post方法读取数据

自动合并某列，可以自定义参数，范例如下

function Merge() {
    var Initialvalue = 1;
    var InitBool = false;
    for (var i = 1; i <= $("#tbody tr").length; i++) {

        var one = $.trim($("#tbody tr").eq(i - 1).find("td").eq(1).text());
        var two = $.trim($("#tbody tr").eq(i).find("td").eq(1).text());
        if (one == two) {
            Initialvalue++;
            InitBool = false;

            $("#tbody tr").eq(i).find("td").eq(1).hide();

        } else {
            InitBool = true;

        }
        if (i == $("#tbody tr").length) {
            InitBool = true;

        }
        if (InitBool) {
            $("#tbody tr").eq(i - Initialvalue).find("td").eq(1).attr("rowspan", Initialvalue);
            Initialvalue = 1;
        }

    }
}

合并表格某列

单击某行变色

function Bgcolcor() {
    //单双行变色
    var SingleTr = 0;
    for (var i = 0; i < $("#tbody tr").length; i++) {

        var tr = $("#tbody tr").eq(i);
        var rowspan = 0;
        for (var j = 0; j < tr.find("td").length; j++) {
            if (tr.find("td").eq(j).attr("rowspan") != undefined) {
                if (parseInt(tr.find("td").eq(j).attr("rowspan")) > rowspan) {
                    rowspan = parseInt(tr.find("td").eq(j).attr("rowspan"));
                }
            }
        }

        for (var m = 0; m <= rowspan; m++) {
            if (SingleTr % 2 != 0) {

                $("#tbody tr").eq(i + m).addClass("trtwobgcolor");
            }
        }

        for (var tempi = 1; tempi < rowspan; tempi++) {
            i++;
        }

        SingleTr++;
    }
}

单击某行变色