创建 固定页眉、页脚和列 表 jQuery Fixedheaderable.js

  • 源码大小:48.99KB
  • 所需积分:1积分
  • 源码编号:19JP-3381
  • 浏览次数:297次
  • 最后更新:2023年06月07日
  • 所属栏目:表格
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

开发了一个小型jQuery插件,用于创建具有固定页眉、页脚和列的HTML表。

使用此插件,您可以滚动浏览表的内容,但始终可以看到顶部的页眉(底部的页脚,左侧的指定列)。

参见:

  • 粘性表头的10个最佳JavaScript插件
  • JavaScript和CSS中的10个最佳响应表插件

如何使用它:

1.加载jquery.fixedheadertable.js正确安装jQuery库之后的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fixedheadertable.js"></script>

2.要冻结页眉和页脚,您的HTML表必须具有剧院设计表尾样式元素。

<table class="example">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>

3.调用HTML表上的函数。

$('.example').fixedHeaderTable({
  footer: true,
});

4.或者,如果您的表没有设计表尾样式要素

$('.example').fixedHeaderTable({
  footer: true,
  cloneHeadToFoot: true,
});

5.在表格左侧粘贴指定数量的列。

$('.example').fixedHeaderTable({
  fixedColumns: 2
});

6.确定是否隐藏HTML表,直到插件初始化为止。默认值:true。

$('.example').fixedHeaderTable({
  autoShow: false,
});

7.该插件还提供了几个选项来设置HTML表的样式。

$('.example').fixedHeaderTable({
  altClass: 'altClass',
  themeClass: 'wrapperClass',
  width: '100%',
  height: '100%',
  borderCollapse: true,
});

预览截图