开发了一个小型jQuery插件,用于创建具有固定页眉、页脚和列的HTML表。
使用此插件,您可以滚动浏览表的内容,但始终可以看到顶部的页眉(底部的页脚,左侧的指定列)。
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,
- });