当前位置：首页 > 网页特效 > 表格

jQuery表格头和列固定插件

分类：表格日期：2024-05-14 点击(15) 评论(0)

jQuery表格头和列固定插件

简介

在页面中引入freeze-table.js文件。

```html
<script src="path/to/freeze-table.js"></script>
```
#####  HTML结构
在表格上添加.table class类，并且用一个div元素包裹表格，并未它添加.freeze-tableclass类。

```html
<div class="freeze-table">
  <table class="table">
    <thead>
      <th>...</th>
    </thead>
    <tbody>
      <td>...</td>
    <tbody>
  </table>
</div>
```
#####  初始化插件
在页面DOM元素加载完毕，通过freezeTable()来初始化该插件。

```html
$(function() {
  $('.freeze-table').freezeTable({});
});
```
#####  配置参数
|  参数 |  类型 |  默认值 | 描述  |
| ------------ | ------------ | ------------ | ------------ |
|  freezeHead |  boolean |  true | 是否允许<thead>元素在滚动时固定。  |
|freezeColumn|boolean|true|是否允许表格列在滚动时固定。|
|freezeColumnHead|boolean|true|是否允许表格列（头）在滚动时固定。|
|scrollBar|boolean|false|是否在X轴上固定滚动条。|
|fixedNavbar|string|'.navbar-fixed-top'|Fixed navbar deviation consideration. Example: '#navbar'|
|namespace|string|'freeze-table'|表格的命名空间。|
|columnNum|integer|1|冻结列的数量。|
|columnBorderWidth|integer|1|冻结列的附加边框宽度。|
|columnWrapStyles|object|null|自定义冻结列的样式。|
|headWrapStyles|object|null|自定义冻结表格头的样式。|
|columnHeadWrapStyles|object|null|自定义冻结表格头的样式。|
|callback|function|null|回调函数|
|shadow|boolean|false|是否允许使用box-shadowv
|backgroundColor|string|'white'|表格背景颜色。|

web299.com

jQuery表格头和列固定插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果