当滚动父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>
答案 0 :(得分：0)
由于我对其他插件的依赖：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");
});
});
所以我克隆了我想要的表格，然后将其重新插入到实际表格之上。
通过检查单击新主题的新元素然后使用jQuery的神奇触发器方法触发点击隐藏表头中相关联的th，Tablesorter仍处于活动状态。