En-tête de table de position fixe par rapport à l'élément DIV de défilement parent

J'ai besoin d'une position fixe qui soit statique lorsque l'élément DIV parent est défilé.En-tête de table de position fixe par rapport à l'élément DIV de défilement parent

Je n'ai pas besoin d'un élément de corps défilant car le parent s'en occupera.

Pas question du support d'IE6.

Le code HTML:

<div class="scroll"> 
    <form method="post" name="price_update" id="price_update" action="/"> 
     <table summary="A table displaying price quotes for 'product name'" class="pricing striped"> 
      <thead> 
      <th> </th> 
       <th> Date </th> 
       <th> Commodity </th> 
       <th width="6%"> Grade </th> 
       <th class="text_center"> Terms </th> 
       <th> Location </th> 
       <th class="text_center"> Unit </th> 
       <th> </th> 
       <th> </th> 
       <th class="text_center"> Price Range </th> 
       <th> </th> 
       <th> </th> 
       <th class="text_center"> Type </th> 
       <th> Frequency </th> 
       <th> Measured </th> 
       </thead> 
      <tbody> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" checked="checked" title="" name="4010002" id="check4010002" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> Europe </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+10.00) </td> 
        <td class="text_center"> 1125.00 
         - 1140.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+15.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td> Closing value </td> 
       </tr> 
       <tr> 
        <th scope="row"> <input type="checkbox" title="" name="4010007" id="check4010007" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> Europe </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+27.00) </td> 
        <td class="text_center"> 1107.00 
         - 1138.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+13.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td> Full market range </td> 
       </tr> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" title="" name="4010016" id="check4010016" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> FOB </td> 
        <td> NWE </td> 
        <td class="text_center"> EUR/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+142.00) </td> 
        <td class="text_center"> 883.00 
         - 883.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+142.00) </td> 
        <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <th scope="row"> <input type="checkbox" title="" name="4010017" id="check4010017" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> Europe </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+40.00) </td> 
        <td class="text_center"> 1110.00 
         - 1120.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+30.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td> Closing value </td> 
       </tr> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" title="" name="4010018" id="check4010018" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> Europe </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+8.00) </td> 
        <td class="text_center"> 1058.00 
         - 1135.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+70.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td> Full market range </td> 
       </tr> 
       <tr> 
        <th scope="row"> <input type="checkbox" title="" name="4010023" id="check4010023" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Benzene</a></td> 
        <td></td> 
        <td class="text_center"> FOB </td> 
        <td> NWE </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+191.00) </td> 
        <td class="text_center"> 1190.00 
         - 1190.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+191.00) </td> 
        <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" title="" name="4001005" id="check4001005" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> NWE </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td> 
        <td class="text_center"> (-1.00) </td> 
        <td class="text_center"> 1107.00 
         - 1120.00 </td> 
        <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td> 
        <td class="text_center"> (-2.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <th scope="row"> <input type="checkbox" title="" name="4001006" id="check4001006" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> Med </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td> 
        <td class="text_center"> (-1.00) </td> 
        <td class="text_center"> 1107.00 
         - 1120.00 </td> 
        <td class="text_center"><span class="price_down"> Price movement indicator: Down </span></td> 
        <td class="text_center"> (-2.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" title="Pipeline" name="4001023" id="check4001023" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td> 
        <td> Pipeline, Pipeline </td> 
        <td class="text_center"> FD </td> 
        <td> NWE </td> 
        <td class="text_center"> EUR/MT </td> 
        <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td> 
        <td class="text_center"> (0.00) </td> 
        <td class="text_center"> 830.00 
         - 840.00 </td> 
        <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td> 
        <td class="text_center"> (0.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <th scope="row"> <input type="checkbox" title="" name="4001052" id="check4001052" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Ethylene</a></td> 
        <td></td> 
        <td class="text_center"> FD </td> 
        <td> NWE </td> 
        <td class="text_center"> EUR/MT </td> 
        <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td> 
        <td class="text_center"> (0.00) </td> 
        <td class="text_center"> 960.00 
         - 960.00 </td> 
        <td class="text_center"><span class="no_change"> Price movement indicator: No Change </span></td> 
        <td class="text_center"> (0.00) </td> 
        <td class="text_center"><span title="Contract" class="tip_holder contract_quote"> CONTRACT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr class="odd"> 
        <th scope="row"> <input type="checkbox" title="" name="4024001" id="check4024001" class="styled quoteSelector"> 
        </th> 
        <td> 23 Apr 10 </td> 
        <td><a href="/ICISDashboard/PriceReport/13415939">Naphtha</a></td> 
        <td></td> 
        <td class="text_center"> CIF </td> 
        <td> NWE </td> 
        <td class="text_center"> USD/MT </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+17.00) </td> 
        <td class="text_center"> 746.00 
         - 756.00 </td> 
        <td class="text_center"><span class="price_up"> Price movement indicator: Up </span></td> 
        <td class="text_center"> (+17.00) </td> 
        <td class="text_center"><span title="Spot" class="tip_holder spot_quote"> SPOT </span></td> 
        <td></td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</div>

Source

2010-10-13 RyanP13

http://stackoverflow.com/questions/983031/jquery-how-to-freeze-table-header-and-allow-scrolling-of-the-rest-of-the-rows –

En raison de mes dépendances sur d'autres plug-ins: JScrollPane, tablesorter etc, il était difficile de trouver une solution de plugin idéal pour mon problème.

Alors j'ai écrit moi-même un peu de code :)

Ce n'est pas complet, mais le point crucial de c'est la suivante:

$(function() { 

    var $headLength = $("#quotations thead th").length; 

    $("#quotations thead th").each(function(index) { 
     $thisWidth = $(this).attr("width"); 
     //console.log($thisWidth); 
     $("#quotations tbody tr:first td:eq(" + index + ")").attr("width", $thisWidth) 
    }); 

    var $clonedHead = $("#quotations thead") 
    .clone() 
    .insertBefore(".w_price_assess .jScrollPaneContainer") 
    .wrap('<table id="quotations_clone" />'); 

    $("#quotations thead").hide(); 

    $(".w_price_assess").delegate("#quotations_clone thead th", "click", function() { 

     var $this = $(this); 
     var $thIndex = $this.index("#quotations_clone thead th"); 

     $("#quotations thead th:eq(" + $thIndex + ")").trigger("click"); 

    }); 

    $(".w_price_assess table.pricing").tablesorter({ 
     // change the multi sort key from the default shift to alt button 
     sortMultiSortKey: 'shiftKey' 
    }); 

    // re-apply zebra striping after sort 
    $(".w_price_assess table.pricing").bind("sortEnd", function() { 
     $("table.striped .odd").removeClass("odd"); 
     $("table.striped tbody tr:nth-child(odd)").addClass("odd"); 
    }); 

});

Je suis donc le clonage des thead de la table que je veux et RE- l'insérant au-dessus de la table réelle. La tableorter est toujours active en vérifiant quel élément du nouveau le nouveau thead est cliqué, puis en utilisant la fabuleuse méthode de déclenchement de jQuery pour déclencher un clic sur le th associé dans la tête de table cachée.

Source

2010-10-14 08:29:02 RyanP13

En-tête de table de position fixe par rapport à l'élément DIV de défilement parent

Répondre

Questions connexes