Jquery 表格固定表头

时间:2023-03-09 13:41:14
Jquery 表格固定表头

网上找了好多现成的。结果没一个能成。只得自己动手。

(function($){
$.fn.fixHeader = {
init : function(obj){
var p = obj.parent();
//绑定事件
p.scroll(internalScroll); //获取表格第一行
var head = obj.children("thead tr th:first");
if (!head || head.length == 0) {
var body = obj.children("tbody")[0];
head = $(body.children[0].children[0]);
} var headHeight = head.height(); //创建新层
var headDiv = $("<div></div>").appendTo(p);
headDiv.css({
"width": p[0].scrollWidth,
"position":"absolute",
"top": p.offset().top,
"display" : "none",
"background-color":"#f5f5f5",
"height": headHeight
}); //克隆第一行
var table = $("<table id='tblFixHeader'></table>").appendTo(headDiv);
$(obj[0].attributes).each(function () {
if (this.name == "id" || this.name == "ID" || this.name == "Id") return true;
if (this.value.indexOf("background-color") > -1) {
table.attr(this.name, this.value.replace(new RegExp("background-color", "g"),""));
} else {
table.attr(this.name, this.value);
}
});
table.css("text-align", "center").css("background-color", null); var tr = $("<tr></tr>").appendTo(table);
if (body) {
$(body.children[0]).children().each(function() {
var td = $("<td></td>").appendTo(tr);
td.css({
"width" : $(this).width(),
"font-size" : $(this).css("font-size"),
"background-color" : $(this).css("background-color"),
"font-weight" : "bold"
});
td.text($(this).text());
});
} //滚动事件
function internalScroll() {
var top = obj.scrollTop();
if (top <= 100 - headHeight) {
headDiv.css("display","");
}else{
headDiv.css("display","none");
}
$("#btnTest").val(top + " " + head.height());
} $(window).resize(function() {
setTimeout(100, doResize());
}); function doResize() {
headDiv.css("width", p[0].scrollWidth);
var tbl = $("#tblFixHeader");
if (tbl && tbl.length == 1) {
var line = obj.children().get(0).children[0];
if (line) {
var line2 = tbl.children().get(0).children[0];
if (line2) {
for (var i = 0; i < line.children.length; i++) {
$(line2.children[i]).css("width", $(line.children[i]).css("width"));
}
}
}
}
}
}
};
})(jQuery);

好用,就拿走。