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

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

简介

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

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

参见:

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

如何使用它:

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

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

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

  1. <table class="example">
  2. <thead>
  3. <tr>
  4. ...
  5. </tr>
  6. </thead>
  7. <tfoot>
  8. <tr>
  9. ...
  10. </tr>
  11. </tfoot>
  12. <tbody>
  13. <tr>
  14. ...
  15. </tr>
  16. </tbody>
  17. </table>

3.调用HTML表上的函数。

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

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

  1. $('.example').fixedHeaderTable({
  2. footer: true,
  3. cloneHeadToFoot: true,
  4. });

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

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

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

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

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

  1. $('.example').fixedHeaderTable({
  2. altClass: 'altClass',
  3. themeClass: 'wrapperClass',
  4. width: '100%',
  5. height: '100%',
  6. borderCollapse: true,
  7. });

预览截图