Фиксированный заголовок таблицы положения относительно родительского прокручивающего элемента DIV - PullRequest
0 голосов
/ 13 октября 2010

Мне нужна неподвижная позиция, которая является статической при прокрутке родительского элемента DIV.

Мне не нужен прокручиваемый элемент tbody, так как родитель позаботится об этом.

Не беспокоится о поддержке IE6.

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>

1 Ответ

0 голосов
/ 14 октября 2010

Из-за моих зависимостей от других плагинов: jScrollPane, Tablesorter и т. Д. Было трудно найти идеальное решение для плагина для моей проблемы.

Итак, я сам написал код:)

Это не завершено, но суть в следующем:

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

});

Таким образом, я клонирую thead таблицы, которую я хочу, и затем вставляю ее поверх фактической таблицы.

Tablesorter по-прежнему активен, проверяя, по какому элементу нового нового клика щелкнули, а затем с помощью невероятного метода триггера jQuery, чтобы вызвать щелчок по соответствующему th в скрытой заголовке таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...