TABLE 多表头固定问题（基本jquery插件）

最新推荐文章于 2022-09-01 13:03:17 发布
最新推荐文章于 2022-09-01 13:03:17 发布
阅读量167 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： jquery html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_9244/article/details/82609078
版权
在这个插件的使用中，部分网友反应有两个问题：

1>单元格内容很长时，会出现布局问题；

2>固定的表头，有时与下面的tbody中的元素不能对齐

解决方法：

1>第一个问题实际就是单元格自动换行的问题，可以用下面的方法解决（但仅IE下通过），加入CSS 

    table tbody td  
            {  
                word-break: break-all;  
                word-wrap: break-word;  
            }

并在调用时传入tableLayout="fixed",采用固定的table布局方案。

2>第二个问题，试过很多种方法，最稳定的方法是在页面加载完后，将原来的表头TD宽度赋给新的固定表头，代码详见插件源代码



1 业务要求：

固定TABLE的表头，当垂直滚动时，表头位置不变，始终可见；

2 存在的问题：

网上很多的例子都是针对于单行的表头，如果是多表头,并且td有rowspan在IE下会出现下面的情况（如果您遇到的是多表头td在固定时出现跨行显示的问题，这篇文章适合您）
[img]http://pic002.cnblogs.com/images/2012/323742/2012090516523660.jpg[/img]
3 解决方法:
写了一个jquery插件来解决这个问题，主要思想是：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置 

/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
    $.fn.extend({
        FixedHead: function (options) {
            var op = $.extend({ tableLayout: "auto" }, options);
            return this.each(function () {
                var $this = $(this); //指向当前的table
                var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
                $thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
                var x = $thisParentDiv.position();

                var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
                    .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
                    .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });

                var $thisClone = $this.clone(true);
                $thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
                $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中

                $this.css({ "marginTop": 0, "table-layout": op.tableLayout });
                //当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
                $thisParentDiv.scroll(function () {
                    fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
                });

                //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
                //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
                var $fixHeadTrs = $thisClone.find("thead tr");
                var $orginalHeadTrs = $this.find("thead");
                $fixHeadTrs.each(function (indexTr) {
                    var $curFixTds = $(this).find("td");
                    var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
                    $curFixTds.each(function (indexTd) {
                        $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
                    });
                });
            });
        }
    });
})(jQuery);

5实现要点

1>table表头元素要放在<thead>中

2>table外面需要包一层DIV

3>运行后发现表头与数据行不对齐，需要调整一下表格中元素的宽度。可以尝试传入tableLayout属性（因为样式问题多种多样，不能保证有用）。

6 示例(在FF和IE8下测试通过) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        table th
        {
            background-color: Gray;
        }
        table tbody td
        {
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
    <script type="text/javascript">
        /*
        * Auther:Mike.Jiang
        * Email: dataadapter@hotmail.com
        * Date: 2012-09-05
        */
        /*
        主要思想：
        1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
        2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
        */
        (function ($) {
            $.fn.extend({
                FixedHead: function (options) {
                    var op = $.extend({ tableLayout: "auto" }, options);
                    return this.each(function () {
                        var $this = $(this); //指向当前的table
                        var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
                        $thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
                        var x = $thisParentDiv.position();

                        var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
                    .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
                    .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });

                        var $thisClone = $this.clone(true);
                        $thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
                        $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中

                        $this.css({ "marginTop": 0, "table-layout": op.tableLayout });
                        //当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
                        $thisParentDiv.scroll(function () {
                            fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
                        });

                        //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
                        //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
                        var $fixHeadTrs = $thisClone.find("thead tr");
                        var $orginalHeadTrs = $this.find("thead");
                        $fixHeadTrs.each(function (indexTr) {
                            var $curFixTds = $(this).find("td");
                            var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
                            $curFixTds.each(function (indexTd) {
                                $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
                            });
                        });
                    });
                }
            });
        })(jQuery);
        $(document).ready(function () {
            $("#tbTest").FixedHead({ tableLayout: "fixed" });
        });
    </script>
</head>
<body>
    <div style="height: 200px; width: 400px; overflow: auto;">
        <table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
            <thead>
                <tr>
                    <th rowspan="2" style="width: 30%">
                        项目
                    </th>
                    <th colspan="2">
                        常规性税金
                    </th>
                    <th colspan="2">
                        非常规性税金
                    </th>
                    <th rowspan="2" style="width: 10%">
                        工程税
                    </th>
                </tr>
                <tr>
                    <th style="width: 15%">
                        城建税
                    </th>
                    <th style="width: 15%">
                        教育费附加%
                    </th>
                    <th style="width: 15%">
                        堤围防护费%
                    </th>
                    <th style="width: 15%">
                        个人所得税%
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        11111111111111111.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
                <tr>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                    <td>
                        0.2
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
iteye_9244
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
jquery插件固定table表头
09-25
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
jQ方法实现table多数据固定表头
砂糖葫芦娃的博客
12-07 983
只要在html页面上写一个table，引用下方的代码，就会自动完成上下左右多数据表头固定的功能.没有添加样式，大家可以随意自行添加。jquery.fexedTabkeHead.js(function () {) { .fn.extend({ FixedHead: function (options) { var defualts={
jqGrid 两层表头
dream_heheda的博客
07-20 2486
<div class="panel-body"> <table id="list"></table> <div id="pager"></div> </div><script language="JavaScript"> jQuery("#list").jqGrid({ url : 'DisasterInformation/json/al
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
Jquery table固定表头,固定列,全浏览器兼容
11-19
总之，创建一个具有固定表头和列的全浏览器兼容的 jQuery 表格涉及多方面的技术，包括 JavaScript 事件监听、DOM 操作、CSS 定位和兼容性处理。通过合理地组织代码和利用现有的资源，我们可以构建出高性能且用户友好...
BootStrap table表格插件自适应固定表头(超好用)
09-01
在本文中，我们将深入探讨如何利用该插件实现表格的自适应固定表头，这对于在响应式设计中保持数据清晰可读至关重要。 首先，要使用BootStrap Table，你需要在你的HTML文件中引入必要的库，包括Bootstrap的CSS和JS...
移动端table固定表头与固定第一列
02-20
对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用传统的方法，如创建重复的表头和第一列，并通过JavaScript同步滚动状态。 总结起来，实现移动端table的...
jquery插件table表格头部和左侧固定
09-29
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，...
jQuery锁定表头和固定列插件FixedTable
walle的博客
11-02 8104
http://www.jq22.com/jquery-info15805
table固定表头
最新发布
bluelotos893的博客
09-01 7401
设置table表头固定
table中head表头固定，body滚动
hualele的专栏
11-01 4万+
table中head表头固定，body滚动
table表头和首列的表格固定-CSS实现的Table表头固定
Harry_一棵树的博客
04-10 4万+
效果就是上图 表头是固定的， 跟随滑动轴动，左边第一列也是可以跟谁滑动轴滚动 下面是代码原文是查看<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="jack"> <meta n
element中table组件设置多级表头并固定
qq_44427336的博客
10-29 2273
element官网中table组件提供了设置多级表头和固定表头列的功能 如果想同时实现这两个功能，需要为父级表头设置总width长度，子级表头也要设置width，总和不能超过父级总width长度 <el-table-column label="回款进度" prop="paymentCollectionProgress" fixed width="400" > <el-table-column label=
Html Table表头固定
一包大豫竹的博客
12-21 1万+
实现效果： 上代码： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;ξӗθCSSތԌ&lt;/title&gt; &lt;style&
表格【table标签】固定表头小技巧
vscode_js的博客
08-23 5981
近期开发一个小项目，由于项目本身比较小巧，所以也没考虑使用ui框架，项目纯手写html+css+js，由于页面的表格数据后台没有返回分页数据，导致整个表格集体向上滑动，故产品提出将table表格表头固定的小需求 尝试了很多种方法，thead不能单独脱离出来，否则整个table就瘫痪了，在无意中发现了一个合并表头的小技巧，完美解决当前的这个表头固定的小需求，下面让我们一起看一下展示效果吧： ...
基于jquery的表头固定的若干方法
01-19
针对这一问题，我们可以利用jQuery和JQuery UI插件来实现表头的固定。下面将详细介绍一种基于jQuery的表头固定方法。 方法A：使用JQuery UI插件 这种方法的核心思路是将原始的`table`元素用`div`替换，并利用CSS的`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值