1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
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");
floatingHeaderRow.css("z-index", "20");
// 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.parent).scroll(UpdateTableHeaders);
$(window.parent).resize(UpdateTableHeaders);
});
|
