表格固定表头

        今天折腾个东东，想要把表格的表头固定，很多网站都有这样的浏览体验，所以也给自己加个。在网上搜索好多，不清不楚，不知所云，还不如自己写一个。既然自己写就得整理一下思路。

        其实只需要把表头位置放到浏览器的可视区域顶部就行，表格的其它部分不需要控制。所以很简单，代码如下：

  function tableProperty(id){
    //var tbls = document.getElementsByTagName("table");
    //this.tbl = tbls && tbls.length && tbls[0];
    if(!id) return;
    this.tbl = document.getElementById(id);
    this.th = this.tbl && this.tbl.tHead;
    this.tb = this.tbl && this.tbl.tBody;
  };
  tableProperty.prototype.init=function(){
    if(!this.th) return;
    this.initTop = this.th.offsetTop;
    var that = this;
    if(window.attachEvent){//IE
      window.attachEvent("onscroll",function(){
      that.onScroll();
      },false);
    }
    else if(window.addEventListener){//modern browsers
      window.addEventListener("scroll",function(){
        that.onScroll();
      },false);
    }
    else{
    }
  };
  tableProperty.prototype.onScroll = function(){
    if(typeof this.initTop!="number"||!this.th) return;
    if(this.initTop>window.scrollY){
      this.th.style.top = this.initTop - window.scrollY;
    }
    else{
      this.th.style.top = 0;
    }
  };

使用方法：

var tp = new tableProperty("fixTable");
tp.init();

"fixTable"为表格id,直接使用就OK了。

差点忘记了，表格的thead中，position要设置为fixed^_^