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);
好用,就拿走。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。