js锁定表头和列，实现类似execl锁定效果

最新推荐文章于 2021-11-29 16:13:53 发布
最新推荐文章于 2021-11-29 16:13:53 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JS相关 文章标签： js锁定表头 js类似execl js锁定列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiedao_liyk/article/details/60142768
版权

js锁定表头和列，实现类似execl锁定效果，项目实现后效果如下：

实际项目应用效果

js代码

<script type="text/javascript">
function FixTable(TableID, FixColumnNumber, width, height) {
    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
    var oldtable = $("#" + TableID);
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    HeadHeight += 2;
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth += 2;
    if ($.browser.msie) {
        switch ($.browser.version) {
            case "7.0":
                if (ColumnsNumber >= 3) ColumnsWidth--;
                break;
            case "8.0":
                if (ColumnsNumber >= 2) ColumnsWidth--;
                break;
        }
    }
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "#fff" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width, "position": "relative", "z-index": "45", "background-color": "#fff" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height, "position": "relative", "z-index": "40", "background-color": "#fff" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
$(document).ready(function () {
    FixTable("MyTable", 2,600, 400);
});
/*
* 1.参数分别为（要锁定的Table的ID，要锁定列的个数，显示的宽度，显示的高度）
* 2.显示的宽度，显示的高度在移动端用可使用$(window).width(),$(window).height()
*/
</script>

对应的html代码

<table id="MyTable">
<thead>
    <tr>
        <th style="text-align: center; width: 80px" rowspan="3">
            姓名
        </th>
        <th style="text-align: center; width: 80px" rowspan="3">
            班级
        </th>
        <th style="text-align: center" colspan="10">
            成绩
        </th>
    </tr>
    <tr>
        <th style="text-align: center" colspan="3">
            主科
        </th>
        <th style="text-align: center" colspan="3">
            文科
        </th>
        <th style="text-align: center" colspan="3">
            理科
        </th>
        <th style="text-align: center; width: 80px" rowspan="2">
            总分
        </th>
        </tr>
    <tr>
        <th style="text-align: center; width: 80px">
            语文
        </th>
        <th style="text-align: center; width: 80px">
            数学
        </th>
        <th style="text-align: center; width: 80px">
            英语
        </th>
        <th style="text-align: center; width: 80px">
            政治
        </th>
        <th style="text-align: center; width: 80px">
            历史
        </th>
        <th style="text-align: center; width: 80px">
            地理
        </th>
        <th style="text-align: center; width: 80px">
            物理
        </th>
        <th style="text-align: center; width: 80px">
            化学
        </th>
        <th style="text-align: center; width: 80px">
            生物
        </th>
    </tr>
</thead>
    <tbody>
    <!-- 数据行 -->
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
                <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                姓名32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
    </tbody>
</table>
凌云客
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS锁定表头锁定列1.4
11-24
原生JS写的表头锁定及左边列锁定功能，原创代码，代码比较简单，兼容IE9+、谷歌、火狐等主流浏览器，文件中包含JS源代码和示例。 此版本修正了之前的一些BUG，增加了拆分线功能。
Jquery版的Execl表头固定，IE，Firefox通过检测
09-24
超级酷的Jquery表头固定，经检测IE,Firefox均通过，效果跟微软的Excel效果一样，实用，操作简单。
JS实现table 列锁定
su717854075的博客
11-24 2266
滚动条监听事件，定位元素位置 $(".jqGrid_wrapper").scroll(function() { var left=$(".jqGrid_wrapper").scrollLeft();//获取滚动的距离 var ths=$(".jqGrid_wrapper table").eq(0).find("tr");//获取表格的所有tr ths.each(f
js方式锁定表头
ruanhao1203的专栏
07-15 659
js方式锁定表头
JS冻结表头和列
pengjj2的博客
12-27 342
JS —— 根据某个对象属性对数组进行类似Excel表头数据排序（A1，A10，B2）
蜡笔小星的博客
11-29 642
假设：一个listData数组结构如图，要想根据数组对象中的name进行类似Excel表头数据排序（A1，A10，B2），用js如何实现？ compare (name) { return function (s, t) { let a = s[name].toLowerCase(); let b = t[name].toLowerCase(); if (a.length === 2) { a = a.slice(0, a.le
python pands实现execl转csv 并修改csv指定列的方法
09-19
今天小编就为大家分享一篇python pands实现execl转csv 并修改csv指定列的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS导入Execl
11-07
JS导入Execl,前端导入Excel，SheetJS 简化了电子表格 阅读，编辑和导出电子表格 适用于Web浏览器和服务器 支持每种Excel文件格式
获取EXECL各列值（列数或字母代码）.zip
09-06
已知Execl第几列或列字母，得出对应列的数值或字母。根据输入的数字列号，转换为标准的excel列编号，比如：29对应AC。或者说已知列字母AC 得出位于execl是第几列
Execl级联实现 JAVA实现 可以直接运行
10-26
Execl级联实现 JAVA实现 可以直接运行 IDEA Maven项目
js实现像excel表格锁定功能，拖动滚动条指定锁住的列不滚动
01-09
js实现像excel表格锁定功能，拖动滚动条指定锁住的列不滚动，内容使用的是table表格 使用代码： var Options = { table : "tb", width : 600, height : 300, rows : 1, cells : 2 } new Fixed(Options);
HTML,JSP,JQ,JS冻结表单的表头和侧栏
10-29
HTML,JSP,JQ,JS冻结表单的表头和侧栏
javascript 绘制表格table,可以固定首行,首列
12-22
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
js,HTML,表头固定，不用插件。
07-25
纯js和css完成表头的固定冻结。简单的几行代码便可以完成。
Html纯js固定表头、左侧首列
12-13
Html纯js固定表头、左侧首列，无须使用第三方插件
通过js实现固定表格的表头和某列
11-15 1617
通过js实现固定表格的表头和某列 在开发过程中，如果数据比较多并且需要对比查看的情况下，一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的需求。这时候就需要自己动手写一个这样的效果。 需求 表格是页面的主体部分，表格的数据量比较大，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第一列，第二列固定...
js固定表头
小码农大梦想
12-19 954
js固定表头 由于table的表头是js根据后台的数据直接动态拼接的html标签,所以Bootstrap的冻结表头用不了。 css代码片. #fixed_table #fix_tr1{ background: #FFFFFF; } #fixed_table #fix_tr2{ background: #...
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2549
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
python比较execl指定表头列的内容
最新发布
05-11
例如，假设需要读取文件名为“test.xlsx”的Excel文件，并且指定表头列的内容为“姓名”和“年龄”，可以使用以下代码： ```python import pandas as pd # 读取Excel文件并指定表头列的内容 df = pd.read_excel('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值