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);

好用,就拿走。

时间: 2024-08-01 07:13:34

Jquery 表格固定表头的相关文章

jquery 表格固定表头、列插件

原创插件,转载请声明出处!!! PS:此插件并无什么效率可言(注重效率就不要用了),然后也不支持旧版本浏览器(不支持css3 pointer-events属性的不能用) PS2:相比其他插件(例如:http://www.fixedheadertable.com/),我写的这个的唯一优点就是不改变原来的表格结构(实际上是在原表格的容器的下方复制生成三个一样的表格) jquery.fixedtable.js 内容如下: /*! * jQuery Copy Plugin * version: 1.0.

自定义表格固定表头,随着表格内容增加出现滚动条

1.首先要固定表头就必须是两个表格组合在一起 2.用一个div把两个表格包在一起,并且设置宽度,在让它可以横向滚动,overflow-x: auto 3.在设置里面两个table的宽度为一样,在设置内容表格overflow-x:hidden;overflow-y:auto <!--表格表头固定--HTML部分> <div class="wrap_table"> <div class="table_head"> <table

table 表格固定表头和第一列、内容可滚动

整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"&

jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对

表格在固定表头遇到样式问题

css 样式来固定表头,首先设置两个table,这个时候就遇到了一个问题,那就是两个表格td的宽度要保持对其.这样才能做到固定表头的效果. 首先给table设置一个固定宽度.然后添加样式 table{table-layed:fixed} 有可能还会遇到其他的问题就是在设置td的宽度无效,这个时候不要慌.先检查是否为td设置了colspan和rowsapn等属性.如果是表格的第一列tr设置了这两个属性很可能导致td的宽度无效.我前面就是,利用一个其他的元素代替  然后就可以肆无忌惮的修改td的宽度

jquery固定表头或冻结表头的方法

html中经常遇到要把一个table的表头部分冻结,以便浏览时有更好的体验,百度完了大多数的网上解决方案,高级的bootstrap和angularjs中都没有清晰的解决方案,难道就我们中国人需要固定表头或者冻结table表头不成?其实自己写一个也没什么不可,eacherp中就有一个很方便的解决办法,一个函数而已,使用起来比较方便. javascript代码: <script> var container="#grid"; var url="abc.php"

(转)用JQuery实现Fix表头表格

本文转载自:http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html 我的技术要点: 1.用两个表,其中一个是表头,另一个是表格做表体 2.两个表格使用相同的百分比宽度 3.在IE下,如果列溢出,则采用 ... 来表示溢出,FF下自动隐藏 4.采用JQuery,把表头的列宽,设置到表体第一列. 5.在窗体大小改变时,自动设置表头的容器宽度为表体的宽度. 不复杂,代码如下: <!DOCTYPE HTML PUBLIC "-//W

vue 表格树 固定表头

参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <template> <div ref="table" :style="{width:treeGridWidth}" class='autoTable tree-grid'> <div ref="header" class="tree-grid-heade

固定表头、锁定前几列的代码参考[JS篇]

引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活,这TM真是一个糟糕的事情!这两天,终于把项目上上去了,不管结果怎么样,总算是交差了吧.趁着这空档的时间,写点东西. 本篇,就来写写关于固定表头和表列的事儿吧. 相信大家使用excel的时候,肯定都会用到一项冻结的功能,冻结之后,可以让你很方便的查看到各种标题,从而能清楚的查看到当前行的内容. 这个