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

头部固定的响应式jQuery表格插件

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

头部固定的响应式jQuery表格插件

简介

#####  HTML结构
该表格的HTML结构使用标准的HTML表格的结构：

```html
<table class="blue">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    ......
  </tbody>
</table>     
```             
#####  CSS样式
该表格所需的样式非常简单，它提供了2中颜色主题：蓝色和紫色。

```html
.container{
  width:90%;
  margin:auto;
}
 
table{
  border-collapse:collapse;
  width:100%;
}
 
.blue{
  border:2px solid #1ABC9C;
}
 
.blue thead{
  background:#1ABC9C;
}
 
.purple{
  border:2px solid #9B59B6;
}
 
.purple thead{
  background:#9B59B6;
}       
```           
通过nth-child为表格偶数行设置斑马线效果。

```html
tbody tr:nth-child(even){
  background:#ECF0F1;
}   
```               
鼠标滑过表格时修改表格行的背景色和文字颜色。

```html
tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}    
```           
.fixed类用于固定表格头，定位方式使用固定定位，开始是是不可见的。

```html
.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}      
```        
#####  JavaScript
在Js代码中，通过$.fn.fixMe构造了一个简单的表格头部固定插件。该插件中有3个方法：初始化方法init()，头部尺寸修改方法resizeFixed()和头部滚动固定方法scrollFixed()。然后以参数的形式将后两个方法分别传入window对象的resize()和scroll()方法中。

```html
;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);   
```              
最后在页面DOM元素加载完毕之后，通过fixMe()方法来初始化插件。

```html
$(document).ready(function(){
      $("table").fixMe();
});      
```

web299.com

头部固定的响应式jQuery表格插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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