使用固定頭和列的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; 
    } 

我試圖做這樣的事情

$("#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});    
     }); 
    }); 
}); 

模擬jQuery中鎖定，但它似乎不工作 我已經嘗試了一些插件和數據表，問題是，當我使用Fixe時，數據表使頁面非常慢d柱

在此先感謝

Answer 1

我不得不解決過去這個問題，並能夠使用這個工具，通過它的工作：http://datatables.net/當我包括額外的FixedColumns：http://datatables.net/extras/fixedcolumns/

性能非常穩固，具有樣式化的行和列標題。