我正在处理表格，我想修改 javascript 代码，使表格末尾的“页脚”浮动在底部，类似于标题浮动在顶部的方式。
function UpdateTableHeaders() {
$("div.divTableWithFloatingHeader").each(function() {
var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
var floatingHeaderRow = $(".tableFloatingHeader", this);
var offset = $(this).offset();
var scrollTop = $(window).scrollTop();
if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
floatingHeaderRow.css("visibility", "visible");
floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");
// Copy cell widths from original header
$("th", floatingHeaderRow).each(function(index) {
var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
$(this).css('width', cellWidth);
});
// Copy row width from whole table
floatingHeaderRow.css("width", $(this).css("width"));
} else {
floatingHeaderRow.css("visibility", "hidden");
floatingHeaderRow.css("top", "0px");
}
});
}
$(document).ready(function() {
$("table.tableWithFloatingHeader").each(function() {
$(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");
var originalHeaderRow = $("tr:first", this)
originalHeaderRow.before(originalHeaderRow.clone());
var clonedHeaderRow = $("tr:first", this)
clonedHeaderRow.addClass("tableFloatingHeader");
clonedHeaderRow.css("position", "absolute");
clonedHeaderRow.css("top", "0px");
//clonedHeaderRow.css("left", $(this).css("margin-left"));
clonedHeaderRow.css("visibility", "hidden");
originalHeaderRow.addClass("tableFloatingHeaderOriginal");
});
UpdateTableHeaders();
$(window).scroll(UpdateTableHeaders);
$(window).resize(UpdateTableHeaders);
});th {
background-color: lightgrey;
border: 1px solid black;
}
td {
border: 1px solid black;
}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<br/><br/><br/>
<table class="tableWithFloatingHeader" style="border: 3px" align="center">
<thead>
<tr>
<th>t2 col header</th>
<th>t2 col header</th>
</tr>
</thead>
<tbody>
<tr>
<td>t2 data1</td>
<td>t2 data1</td>
</tr>
<tr>
<td>t2 data2</td>
<td>t2 data2</td>
</tr>
<tr>
<td>t2 data3</td>
<td>t2 data3</td>
</tr>
<tr>
<td>t2 data4</td>
<td>t2 data4</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<tr>
<td>t2 data5</td>
<td>t2 data5</td>
</tr>
<tr>
<td>t2 data6</td>
<td>t2 data6</td>
</tr>
<tr>
<td>t2 data7</td>
<td>t2 data7</td>
</tr>
<tr>
<td>t2 data8</td>
<td>t2 data8</td>
</tr>
<tr>
<td>t2 data9</td>
<td>t2 data9</td>
</tr>
<tr>
<td>t2 data10</td>
<td>t2 data10</td>
</tr>
<thead>
<tr>
<th>t2 col footer</th>
<th>t2 col footer</th>
</tr>
</thead>
</tbody>
</table>