js table 表格冻结

于 2023-02-15 11:04:58 发布
阅读量703 收藏 3
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BMYBrother/article/details/129039564
版权

可以实现 html table 的 上+下+左+右 4个方向的冻结功能，废话不多话，直接上代码。

相关的配置如下，表格 id，以及4个属性，data-top-row-num、data-bottom-row-num、data-left-column-num、data-right-column-num 请根据实际情况进行设置。

有个在线 demo 链接，可以看看效果。

function tableFreeze(id, width, height) {
    var table = $("#" + id);
    var topRowNum = table.attr("data-top-row-num") === undefined ? 0 : parseInt(table.attr("data-top-row-num"));
    var bottomRowNum = table.attr("data-bottom-row-num") === undefined ? 0 : parseInt(table.attr("data-bottom-row-num"));
    var leftColumnNum = table.attr("data-left-column-num") === undefined ? 0 : parseInt(table.attr("data-left-column-num"));
    var rightColumnNum = table.attr("data-right-column-num") === undefined ? 0 : parseInt(table.attr("data-right-column-num"));

    //共用变量
    var freezeBottomHeight = 0;
    var freezeRightWidth = 0;

    //制作外部框，判断是否存在
    var freezeLayout = $("#" + id + "-freeze-layout");
    if (freezeLayout.length > 0) {
        freezeLayout.before(table);
        freezeLayout.empty();
    } else {
        table.after("<div id='" + id + "-freeze-layout' style='overflow:hidden;width:" + width + "px;height:" + height + "px;'></div>");
        freezeLayout = $("#" + id + "-freeze-layout");
    }

    //判断并生成容器
    var html = "";
    if (topRowNum > 0 && leftColumnNum > 0) {
        html += "<div id='" + id + "-freeze-top-left' style='padding:0px;'></div>";
    }
    if (topRowNum > 0 && rightColumnNum > 0) {
        html += "<div id='" + id + "-freeze-top-right' style='padding:0px;'></div>";
    }
    if (bottomRowNum > 0 && leftColumnNum > 0) {
        html += "<div id='" + id + "-freeze-bottom-left' style='padding:0px;'></div>";
    }
    if (bottomRowNum > 0 && rightColumnNum > 0) {
        html += "<div id='" + id + "-freeze-bottom-right' style='padding:0px;'></div>";
    }
    if (topRowNum > 0) {
        html += "<div id='" + id + "-freeze-top' style='padding:0px;'></div>";
    }
    if (bottomRowNum > 0) {
        html += "<div id='" + id + "-freeze-bottom' style='padding:0px;'></div>";
    }
    if (leftColumnNum > 0) {
        html += "<div id='" + id + "-freeze-left' style='padding:0px;'></div>";
    }
    if (rightColumnNum > 0) {
        html += "<div id='" + id + "-freeze-right' style='padding:0px;'></div>";
    }
    html += "<div id='" + id + "-table-data' style='padding:0px;'></div>";
    freezeLayout.append(html);

    //获取容器
    var freezeTopLeft = $("#" + id + "-freeze-top-left");
    var freezeTopRight = $("#" + id + "-freeze-top-right");
    var freezeBottomLeft = $("#" + id + "-freeze-bottom-left");
    var freezeBottomRight = $("#" + id + "-freeze-bottom-right");
    var freezeTop = $("#" + id + "-freeze-top");
    var freezeBottom = $("#" + id + "-freeze-bottom");
    var freezeLeft = $("#" + id + "-freeze-left");
    var freezeRight = $("#" + id + "-freeze-right");
    var tableData = $("#" + id + "-table-data");

    //表格数据添加至容器
    tableData.append(table);

    //克隆数据
    if (freezeTopLeft.length > 0) {
        var freezeTopLeftClone = table.clone(true);
        freezeTopLeftClone.attr("id", id + "-freeze-top-left-clone");
        freezeTopLeft.append(freezeTopLeftClone);
    }
    if (freezeTopRight.length > 0) {
        var freezeTopRightClone = table.clone(true);
        freezeTopRightClone.attr("id", id + "-freeze-top-right-clone");
        freezeTopRight.append(freezeTopRightClone);
    }
    if (freezeBottomLeft.length > 0) {
        var freezeBottomLeftClone = table.clone(true);
        freezeBottomLeftClone.attr("id", id + "-freeze-bottom-left-clone");
        freezeBottomLeft.append(freezeBottomLeftClone);
    }
    if (freezeBottomRight.length > 0) {
        var freezeBottomRightClone = table.clone(true);
        freezeBottomRightClone.attr("id", id + "-freeze-bottom-right-clone");
        freezeBottomRight.append(freezeBottomRightClone);
    }
    if (freezeTop.length > 0) {
        var freezeTopClone = table.clone(true);
        freezeTopClone.attr("id", id + "-freeze-top-clone");
        freezeTop.append(freezeTopClone);
    }
    if (freezeBottom.length > 0) {
        var freezeBottomClone = table.clone(true);
        freezeBottomClone.attr("id", id + "-freeze-bottom-clone");
        freezeBottom.append(freezeBottomClone);
    }
    if (freezeLeft.length > 0) {
        var freezeLeftClone = table.clone(true);
        freezeLeftClone.attr("id", id + "-freeze-left-clone");
        freezeLeft.append(freezeLeftClone);
    }
    if (freezeRight.length > 0) {
        var freezeRightClone = table.clone(true);
        freezeRightClone.attr("id", id + "-freeze-right-clone");
        freezeRight.append(freezeRightClone);
    }

    $("#" + id + "-freeze-layout table").css("margin", "0");

    //顶部高度计算
    if (freezeTop.length > 0) {
        var freezeTopHeight = 0;
        var ignoreRowNum = 0;
        $("#" + id + "-freeze-top tr:lt(" + topRowNum + ")").each(function () {
            var row = $(this);
            if (ignoreRowNum > 0) {
                ignoreRowNum -= 1;
            } else {
                var td = row.find("td:first,th:first");
                freezeTopHeight += td.outerHeight(true);
                if (typeof (td.attr("rowspan")) != "undefined") {
                    ignoreRowNum = parseInt(td.attr("rowspan")) - 1;
                }
            }
        });
        freezeTopHeight += 2;

        //设置高度，涉及3个容器，上，上左，上右
        freezeTop.css("height", freezeTopHeight);
        if (freezeTopLeft.length > 0) {
            freezeTopLeft.css("height", freezeTopHeight);
        }
        if (freezeTopRight.length > 0) {
            freezeTopRight.css("height", freezeTopHeight);
        }
    }

    //底部高度计算
    if (freezeBottom.length > 0) {
        var ignoreRowNum = 0;
        $("#" + id + "-freeze-bottom tr:gt(" + (table.find("tr").length - 1 - bottomRowNum) + ")").each(function () {
            var row = $(this);
            if (ignoreRowNum > 0) {
                ignoreRowNum -= 1;
            } else {
                var td = row.find("td:first,th:first");
                freezeBottomHeight += td.outerHeight(true);
                if (typeof (td.attr("rowspan")) != "undefined") {
                    ignoreRowNum = parseInt(td.attr("rowspan")) - 1;
                }
            }
        });
        freezeBottomHeight += 2;

        //设置高度，涉及3个容器，下，下左，下右
        freezeBottom.css("height", freezeBottomHeight);
        if (freezeBottomLeft.length > 0) {
            freezeBottomLeft.css("height", freezeBottomHeight);
        }
        if (freezeBottomRight.length > 0) {
            freezeBottomRight.css("height", freezeBottomHeight);
        }
    }

    //左边宽度计算
    if (freezeLeft.length > 0) {
        //逐行判断，如 colspan<=leftColumnNum 即满足
        var freezeLeftWidth = 0;
        $("#" + id + "-freeze-left tr").each(function () {
            var row = $(this);
            var tds = row.find("td,th");
            var tempColumnCount = 0;
            var tempFreezeLeftWidth = 0;
            for (var i = 0; i < leftColumnNum; i++) {
                tempColumnCount += $(tds[i]).attr("colspan") ? parseInt($(tds[i]).attr("colspan")) : 1;
                tempFreezeLeftWidth += $(tds[i]).outerWidth(true);
            }
            if (tempColumnCount === leftColumnNum) {
                freezeLeftWidth = tempFreezeLeftWidth;
                return false;
            }
        });
        freezeLeftWidth += 2;

        //设置宽度，涉及3个容器，左，上左，下左
        freezeLeft.css("width", freezeLeftWidth);
        if (freezeTopLeft.length > 0) {
            freezeTopLeft.css("width", freezeLeftWidth);
        }
        if (freezeBottomLeft.length > 0) {
            freezeBottomLeft.css("width", freezeLeftWidth);
        }
    }

    //右边宽度计算
    if (freezeRight.length > 0) {
        //逐行判断，如 colspan<=rightColumnNum 即满足，需要从右边开始计算
        $("#" + id + "-freeze-right tr").each(function () {
            var row = $(this);
            var tds = row.find("td,th");
            var tempColumnCount = 0;
            var tempFreezeRightWidth = 0;
            for (var i = 0; i < rightColumnNum; i++) {
                var td = $(tds[tds.length - i - 1]);
                tempColumnCount += td.attr("colspan") ? parseInt(td.attr("colspan")) : 1;
                tempFreezeRightWidth += $(td).outerWidth(true);
            }
            if (tempColumnCount === rightColumnNum) {
                freezeRightWidth = tempFreezeRightWidth;
                return false;
            }
        });
        freezeRightWidth += 2;

        //高度宽度，涉及3个容器，右，上右，下右
        freezeRight.css("width", freezeRightWidth);
        if (freezeTopRight.length > 0) {
            freezeTopRight.css("width", freezeRightWidth);
        }
        if (freezeBottomRight.length > 0) {
            freezeBottomRight.css("width", freezeRightWidth);
        }
    }

    //滚动事件
    tableData.scroll(function () {
        if (freezeTop.length > 0) {
            freezeTop.scrollLeft(tableData.scrollLeft());
        }
        if (freezeLeft.length > 0) {
            freezeLeft.scrollTop(tableData.scrollTop());
        }
        if (freezeBottom.length > 0) {
            freezeBottom.scrollLeft(tableData.scrollLeft());
        }
        if (freezeRight.length > 0) {
            freezeRight.scrollTop(tableData.scrollTop());
        }
    });

    //位置设置
    tableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });
    if (freezeTop.length > 0) {
        freezeTop.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "60" });
        freezeTop.offset(freezeLayout.offset());
    }
    if (freezeLeft.length > 0) {
        freezeLeft.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "55" });
        freezeLeft.offset(freezeLayout.offset());
    }
    if (freezeTopLeft.length > 0) {
        freezeTopLeft.css({ "overflow": "hidden", "position": "absolute", "z-index": "65" });
        freezeTopLeft.offset(freezeLayout.offset());
    }
    if (freezeBottom.length > 0) {
        freezeBottom.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "60" });
        $("#" + id + "-freeze-bottom-clone").css({ "position": "absolute", "bottom": "0px" });
        freezeBottom.offset({ top: freezeLayout.offset().top + height - freezeBottomHeight - 17, left: freezeLayout.offset().left });
    }
    if (freezeBottomLeft.length > 0) {
        freezeBottomLeft.css({ "overflow": "hidden", "position": "absolute", "z-index": "65" });
        $("#" + id + "-freeze-bottom-left-clone").css({ "position": "absolute", "bottom": "0px" });
        freezeBottomLeft.offset({ top: freezeLayout.offset().top + height - freezeBottomHeight - 17, left: freezeLayout.offset().left });
    }
    if (freezeRight.length > 0) {
        freezeRight.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "55" });
        $("#" + id + "-freeze-right-clone").css({ "position": "absolute", "right": "0px" });
        freezeRight.offset({ top: freezeLayout.offset().top, left: freezeLayout.offset().left + width - freezeRightWidth - 17 });
    }
    if (freezeTopRight.length > 0) {
        freezeTopRight.css({ "overflow": "hidden", "position": "absolute", "z-index": "65" });
        $("#" + id + "-freeze-top-right-clone").css({ "position": "absolute", "right": "0px" });
        freezeTopRight.offset({ top: freezeLayout.offset().top, left: freezeLayout.offset().left + width - freezeRightWidth - 17 });
    }
    if (freezeBottomRight.length > 0) {
        freezeBottomRight.css({ "overflow": "hidden", "position": "absolute", "z-index": "65" });
        $("#" + id + "-freeze-bottom-right-clone").css({ "position": "absolute", "bottom": "0px", "right": "0px" });
        freezeBottomRight.offset({ top: freezeLayout.offset().top + height - freezeBottomHeight - 17, left: freezeLayout.offset().left + width - freezeRightWidth - 17 });
    }
    tableData.offset(freezeLayout.offset());
}

阿记
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js冻结表格行列实例
06-05
JS 冻结表格: 冻结表格的示例代码 支持主流浏览器,IE也OK. HTML文件直接运行
JTable冻结列的简单实现
wu504374492的专栏
08-24 2923
JTable实现冻结列的示例
table表格实现行、列冻结
aystnd
05-21 2119
客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建...
js 实现html前两列冻结,JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案...
weixin_35714733的博客
06-09 676
前言：最近项目里面需要用到表格的冻结列功能，所谓“冻结列”，就是某些情况下表格的列比较多，需要固定前面的几列，后面的列滚动。遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章。一、起因回顾最近项目里面有一个表格需求，该表格列是动态产生的，而且列的数量操作一定值以后就会出现横向滚动条，滚动的时候需要前面几列固定。也就...
js通过transform实现固定（冻结）表格列
小妖666个人笔记
12-08 1236
<div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;"> <table style="width:800px;"> <thead> <tr style="background: #dcdcdc;">...
JS冻结表头和列
pengjj2的博客
12-27 347
JS冻结表格,锁定表头,固定行列（上下左右4个方向）
11-12
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，调用方法比较简单，具体调用方法请参考示例。
冻结表格左侧列js脚本
最新发布
04-01
一个冻结表格左侧列功能的js脚本, 在使用bootstrap冻结左侧列功能时，bootstrap-table-fixed-columns.js插件与我项目不兼容，不生效，所以自己参考着做了一个，功能未完善，现有功能：冻结左侧列，和可选冻结列数
bootstraptable冻结列例子.doc
01-14
总结来说，Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数，使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数，你可以根据需求定制出...
javascript 绘制表格table,可以固定首行,首列
12-22
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
TableFreeze.js（基于JQuery的表格冻结插件）
12-08
// rowHead, rowFoot, colLeft, colRight 分别对应需要冻结的表格首行，尾行，首列和尾列 var rowHead = 1, rowFoot = 1, colLeft = 2, colRight = 2; $("#someId").FrozenTable(rowHead, rowFoot, colLeft, colRight);
JavaScript实现：冻结列、调整列宽
11-05
轻松实现JavaScript冻结列、调整列宽
TableFreeze冻结列.rar
05-14
项目中需要用到自己动态写table拼接的，前几列冻结，头冻结，底部冻结的，适合使用本案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
jquery-freeze-table：带有冻结头和jQuery列的RWD表
02-03
RWD冻结表 带有冻结头和jQuery列的RWD表 产品特点 使用RWD冻结大型表的标题行和列 可选功能，例如冻结滚动条 命名空间支持多个表 大纲 示范 要求 该库要求以下内容： jQuery 1.11.0+ | 2.0+ | 3.0+ 安装 凉亭安装 bower install jquery-freeze-table 您也可以通过NPM下载或直接复制资产。 资产包括 将JavaScript文件添加到<head>或<body>的底部 < script type =" text/javascript " src =" dist/js/freeze-table.js " > </ script
table的行列冻结
01-03
`freez-table-demo.htm`可能是一个包含冻结表格功能的HTML示例文件，它可能展示了如何结合HTML、CSS和JavaScript实现表格冻结。而`scripts`可能是包含实现该功能的JavaScript代码的文件夹，可能包含了自定义的脚本或...
Table冻结表头示例代码
09-05
本文将详细解释如何使用JavaScript和HTML实现一个简单的表格冻结表头的功能。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`标签定义，包含`<thead>`（表头）、`<tbody>`（表格主体）和`...
JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题
weixin_34221773的博客
06-30 801
前言：一年前，博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ，通过该篇，确实可以实现bootstrapTable的冻结列效果，并且可以兼容ie浏览器。这一年的时间，不断有园友以及群里面的朋友问过我关于固定高度之后，冻结列页面效果不能对齐的问题，奈何博主太忙，一直没有抽空将这个问题优化。最...
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2592
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
js表格冻结列滚动条同步滚动
小妖666个人笔记
12-08 969
用div css写的table表格怎么实现冻结某列，同时实现数据滚动条滚动的时候，表头也跟着滚动呢？ 效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .fixed-table-box { disp...
HTML实现冻结表格效果
在本例中，它用于执行冻结表格的JavaScript函数。 ```html <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> ``` 然后定义了一个名为`FixTable`的JavaScript函数，该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值