`

TABLE 多表头固定问题(基本jquery插件)

    博客分类:
  • JS
 
阅读更多

转载:http://www.cnblogs.com/dataadapter/archive/2012/09/06/2672190.html

在这个插件的使用中,部分网友反应有两个问题:

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在固定时出现跨行显示的问题,这篇文章适合您)


3 解决方法:
写了一个jquery插件来解决这个问题,主要思想是:
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置


4 Jquery插件代码:

View Code
复制代码
/*
* 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下测试通过)

 

示例代码:

View Code
复制代码
<!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>
复制代码
 
 
 
分享到:
评论

相关推荐

    jquery表头固定、列固定完美解决方案

    为了解决这个问题,"jquery表头固定、列固定完美解决方案"应运而生。这个方案结合了jQuery库和自定义的JavaScript插件,旨在确保用户在滚动页面时,表头和选定的列始终可见。 jQuery是一个轻量级的JavaScript库,它...

    基于jquery的table表头固定

    "基于jQuery的table表头固定"通常涉及到以下关键技术点: 1. **分离表头和主体**:首先,我们需要将HTML表格的thead部分与tbody部分分离,这样在进行滚动操作时,thead可以独立于tbody进行定位。 2. **CSS定位**:...

    固定表头的jQuery插件

    "固定表头jQuery插件"的核心功能包括: 1. **表头固定**:无论用户如何滚动页面,表头始终位于屏幕顶部,保证用户能清晰地看到列名,便于理解表格内容。 2. **兼容性广**:此插件经过测试,兼容了多种浏览器,包括...

    基于jquery的固定html table表头/列头插件

    为解决这一问题,基于jQuery的固定html table表头/列头插件应运而生,例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...

    jquery插件固定table表头

    当表格数据较多时,会导致表头随内容滚动,影响使用,因此使用jQuery做一个插件,压缩文件中有test.html是一个具体使用的案例,如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章

    jQuery插件冻结行列、固定列固定行,html、table实现

    该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll",其主要功能是在表格滚动时保持顶部行和左侧列固定,以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...

    固定table表头的插件

    为了解决这个问题,"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置,无论用户如何滚动,表头始终可见,提高了用户的浏览体验。 在HTML中,实现固定表头通常需要CSS和JavaScript的配合。...

    移动端table固定表头与固定第一列

    对于不支持这些特性的老版本浏览器,可能需要使用一些JavaScript库如jQuery Fixed Header Table插件,或者使用传统的方法,如创建重复的表头和第一列,并通过JavaScript同步滚动状态。 总结起来,实现移动端table的...

    Table 固定表头插件

    为了解决这个问题,"Table 固定表头插件"应运而生,它使得在滚动查看长表格内容时,表头能够始终保持可见,便于用户定位和理解数据。 固定表头插件(Fixed Header Table)是Web开发中的一个实用工具,主要应用于...

    Jquery table固定表头,固定列,全浏览器兼容

    总之,创建一个具有固定表头和列的全浏览器兼容的 jQuery 表格涉及多方面的技术,包括 JavaScript 事件监听、DOM 操作、CSS 定位和兼容性处理。通过合理地组织代码和利用现有的资源,我们可以构建出高性能且用户友好...

    jquery插件table表格头部和左侧固定

    大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果,相信大家肯定会受益的,这个demo使用了jQuery来实现,...

    table固定表头和指定列

    当表格数据较多时,为了提供良好的用户体验,我们通常需要实现表格的固定表头(Fixed Header)和固定列(Fixed Column)功能。这允许用户在滚动浏览长表格时,始终保持表头和指定列可见,便于快速定位和理解数据。 ...

    基于jquery的固定html table表头/列头插件 (加强版)

    基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器,亲测(IE6,IE6+,firefox,chrome,opera)。第一版仅支持所固定列数自定义,本加强版新增所固定行数自定义。

    asp.net html+table固定表头和左侧列.rar

    例如,使用GridView的HeaderRow和Columns属性,配合JavaScript库如jQuery或纯CSS框架,如Bootstrap,可以轻松地创建具有固定表头和列的表格。 在实际应用中,开发者还需要考虑响应式设计,确保在不同设备和屏幕尺寸...

    table冻结表头

    为了解决这个问题,"table冻结表头"插件应运而生。这个插件专门用于实现表格的头部和/或列的冻结,使得在浏览长表格时,表头始终可见,增强了用户体验。 "table冻结表头"是一款基于jQuery的轻量级插件,它允许...

    jQuery冻结表头、列

    首先,理解jQuery冻结表头的基本原理。通常,我们会创建一个固定在顶部的表头元素,即使在用户滚动页面时也始终保持可见。这可以通过监听窗口的滚动事件,然后调整表头的位置来实现。具体步骤如下: 1. **创建复制...

    JavaScript:固定table的表头

    为了解决这个问题,"JavaScript:固定table的表头"这一技术应运而生,它的目标是确保当用户滚动页面时,表头始终固定在页面顶部,提供清晰的列标识。 实现固定表头的方法多种多样,其中JavaScript是一种常见的解决...

    jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置,在加一个可拖动的DIV代码

    NULL 博文链接:https://xiaomaha.iteye.com/blog/1106606

    Jquery表格添加滚动条插件,固定表头

    总的来说,"Jquery表格添加滚动条插件,固定表头"这个主题涉及到前端开发中的DOM操作、事件处理、CSS样式和JavaScript插件使用。通过使用jQuery和相应的插件,我们可以提供更优秀的用户体验,使用户在浏览大数据量的...

    asp网页表头固定解决

    这个效果对于提升用户体验非常重要,特别是在处理多列或者数据复杂度高的表格时,固定的表头可以让用户更容易理解数据的结构。 描述中的“整合了一个Gridview表头固定,里面有例子”表明,可能包含的压缩包文件中...

Global site tag (gtag.js) - Google Analytics