jquery - 使用 JQuery 固定标题和列

Question

我的表格设计是大约有 100 列，该部分大约有 4 行

我正在尝试固定标题并卡住一些列。我能够通过使用 CSS 表达式来实现这一点。

CSS 表达式在 IE10 中被破坏并且使页面非常慢，所以我试图使用 Jquery 实现相同的目的，但我无法实现它

我附上了 HTML(为清楚起见删除了大部分)和 CSS。锁定类定义了锁定

div id="main-container" style="overflow: scroll; height: 366px; width: 1023">                   
    <table id="tbl" style="table-layout: fixed"> 
        <thead id="mainTbleHdId">
            <tr>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked">Item Details</th>
                <th class="locked"></th>
                <th></th>
                .
                .
                .
                .
                <th></th>
            </tr>
            <tr class="xxxxx">
                <th class="locked">Select Item(s)</th>
                <th class="locked">Select Decision</th>
                <th class="locked">Select Select</th>                                   
                <th class="locked">Select Description</th>

                .
                .
                .               
                <th >Select Prep</th>                                       
            </tr>
            <tr>         
                <th id="itemView" class="locked" >
                    <input name="selectAll" id="selectAll" type="checkbox">All</th>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                .
                .
                .
                .
                <th ></th>
            </tr>
            <tr >
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                <th class="locked"></th>
                .
                .
                .
                .
                <th >Select Calc</th>
            </tr>
        </thead>
        <tbody id="mainTbleBoyId">           
            <tr class="Rows"> 
                <td id="singleSelctcheckboxtd0" class="locked">
                    <input name="Checkbox" type="checkbox">
                </td>
                <td class="locked"> 
                    <select name="selectNamebuyerDecision"> 
                        <option value="Please Select" name="buyerCheck" selected="selected">Please Select</option>                      
                    </select>
                </td> 
                <td class="locked" id="dpcitd0">
                    <input type="text" value="98070702">
                </td>
                <td class="locked" id="genDesctd0">
                    <input type="text" value="ATHLETIC">
                </td>   
                .
                .
                .
                .
                <td class="InputType" id="liquidationPreptd0">
                    <input type="text" value="0">
                </td>
            </tr>             
        </tbody>
    </table>
</div>

CSS

 TABLE#tbl {
     BORDER-COLLAPSE: collapse; TABLE-LAYOUT: fixed
}
THEAD TH {
    POSITION: relative;  
}
 THEAD TR.nosort TD {
        POSITION: relative; 
}
THEAD  TH.first{

}
Table#tbl THEAD TD {
    Z-INDEX: 20;   TOP: expression(document.getElementById("main-container").scrollTop-2) 
}
Table#tbl THEAD TH {
    Z-INDEX: 20;   TOP: expression(document.getElementById("main-container").scrollTop-2) 
}
Table#tbl THEAD TH.locked {
    Z-INDEX: 30 
}
Table#tbl THEAD TD.locked {
    Z-INDEX: 30
}
TD.locked {
    Z-INDEX: 5; POSITION: relative;   LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft)
}
TH.locked {
    Z-INDEX: 5; POSITION: relative;  LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft)
}
Table#tbl THEAD TH.locked {
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR: #60487A; COLOR: black;  CURSOR: default;  border-bottom: 1px solid black;border-right: 1px solid black;
}
Table#tbl THEAD TD.locked {
    POSITION: relative; 
}
 Table#tbl TBODY TD.locked {
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR:white; COLOR: black; CURSOR: default;
  }

我正在尝试通过做这样的事情来模拟 Jquery 中的锁定

 $("#main-container").scroll(function() {
    var xx = document.getElementById("main-container").scrollTop-2;     
    $("#mainTbleHdIdtr").each(function () {
        $(this).find("th").each(function () {
            $(this).css({'zIndex':20,"TOP":xx});            
        });
    });
});

但是好像不行 我已经尝试了一些插件和数据表，问题是当我使用固定列时数据表使页面非常慢

提前致谢

Answer 1

我过去不得不解决这个问题，并且能够使用这个工具解决它:http://datatables.net/当我包含额外的 FixedColumns 时:http://datatables.net/extras/fixedcolumns/

性能非常稳定，具有样式化的行和列标题。