博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery 表格固定表头
阅读量:5222 次
发布时间:2019-06-14

本文共 3132 字,大约阅读时间需要 10 分钟。

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

(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 = $("
").appendTo(p); headDiv.css({ "width": p[0].scrollWidth, "position":"absolute", "top": p.offset().top, "display" : "none", "background-color":"#f5f5f5", "height": headHeight }); //克隆第一行 var 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 = $("").appendTo(table); if (body) { $(body.children[0]).children().each(function() { var 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);

好用,就拿走。

转载于:https://www.cnblogs.com/goldli/p/4484982.html

你可能感兴趣的文章
selenium第二课(脚本录制seleniumIDE的使用)
查看>>
带权并查集
查看>>
DB2基础(增删改查)
查看>>
python 常用的50个模块
查看>>
音视频合成相关
查看>>
懒,不是理由
查看>>
[二分][dfs]JZOJ 2748 最大立方体空间 80%做法
查看>>
Node post请求 通常配合ajax
查看>>
基于vue-cli,sass,vant的移动端项目
查看>>
MySQL 的数据库、表基本操作
查看>>
MySQL远程访问权限,允许远程连接的开启
查看>>
hive 创建表和导入数据实例
查看>>
Gibbs Sampling深入理解
查看>>
Bootstrap页面布局2 - 包含BS文件
查看>>
Sentinel限流示例:编码和注解限流
查看>>
Java 8 Optional类深度解析
查看>>
fuser 命令小结
查看>>
全局CSS的配置
查看>>
2018-2019-1 20165301 《信息安全系统设计基础》第八周学习总结
查看>>
round分析
查看>>