使用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});            
        });
    });
});

但是它似乎不起作用，我尝试了一些插件和datatable，问题是datatable使页面在使用固定列时变得非常慢

提前谢谢

Answer 1

在过去，我必须解决这个问题，并且能够使用以下工具：http://datatables.net/来解决这个问题:当我包括FixedColumns extra：http://datatables.net/extras/fixedcolumns/时

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