利用Jquery实现表头固

最新推荐文章于 2023-05-28 10:59:15 发布

jokey01

最新推荐文章于 2023-05-28 10:59:15 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 文章标签： jquery date function div scroll table

本文链接：https://blog.csdn.net/jokey01/article/details/2589668

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在网上看到一段十分精简的实现表头固定的脚本，刚好项目中需要，于是利用Jquery进行重写和简单的封装，基本可以在不改动现有表格的基础上实现表头固定，而且可以支持在同一个页面有多个table。

<html>

<head>

<script src="jquery.js" type="text/javascript"></script> 

	

<style type="text/css">

.tableDiv{

    overflow-x:hidden;

    BORDER-RIGHT:  1px solid;

    BORDER-TOP:  1px solid;

    BORDER-BOTTOM:  1px solid;

    BORDER-LEFT:  1px solid;

}



.theadDiv{

  position:relative;

  white-space:nowrap

}



.contentDiv{

overflow-x:scroll;

overflow-y:scroll

}

.theadTd {

        BORDER-RIGHT:  1px solid;

        BORDER-TOP:  1px solid;

        BORDER-BOTTOM:  1px solid;

        BORDER-LEFT:  1px solid;

        padding-top:5px;

        padding-left: 4px;

        padding-right: 4px;

        HEIGHT: 25px;

        overflow:hidden;

        WHITE-SPACE: nowrap

}



</style>

</head>



<script type="text/javascript">

    

    

    function setScrollGrid(tableID,twidth,theight){





      var jqTable = $("#"+tableID);

      var tableDivID = tableID+"_div";

      var theadDivID = tableID+"_thead";

      var contentDivID = tableID+"_content";

      

      var tableDiv = document.createElement("DIV");

      var theadDiv = document.createElement("DIV");

      var contentDiv = document.createElement("DIV");

      

      var jqTableDiv = $(tableDiv);

      var jqTheadDiv = $(theadDiv);

      var jqContentDiv = $(contentDiv);

      

      jqTableDiv.addClass("tableDiv");

      jqTheadDiv.addClass("theadDiv");

      jqContentDiv.addClass("contentDiv");      

      jqContentDiv.get(0).onscroll = function(){ jqTheadDiv.get(0).style.posLeft=-jqContentDiv.get(0).scrollLeft;} 

      

      $(tableDiv).append(theadDiv);

      $(tableDiv).append(contentDiv);



      jqTable.before($(tableDiv));

      $(contentDiv).append(jqTable);

      

       jqTableDiv.width(twidth);

       jqContentDiv.width(twidth);

       jqContentDiv.height(theight);

       

       var jqTheadTds = jqTable.find("thead > tr >td");

       

       var newTitle = "";

       for(var i=0;i < $(jqTheadTds).size();i++){

           

           var tempTd = $(jqTheadTds).get(i);

           newTitle += "<span class='theadTd' style='width:"+(tempTd.clientWidth+4)+"px'>"+tempTd.innerText+"</span>"

        }

       

       jqTheadDiv.html(newTitle);

       

       jqTable.find("thead").remove();

    

    }

    

    

    function init(){

    

    setScrollGrid("testTable",500,200);

    }

    

 </script>   

 

 

 <body οnlοad="init();">

   

       <table  id="testTable" >

       <thead>

        <tr>               

            <td align="center" nowrap  width="100">标题1</td>

            <td align="center" nowrap  width="100">标题2</td>

            <td align="center" nowrap  width="100">标题3</td>                                                                                      

            <td align="center" nowrap  width="100">标题4</td> 

            <td align="center" nowrap  width="100">标题5</td>                                                                                      

            <td align="center" nowrap  width="100">标题6</td>             

       </tr>    

      </thead>

       <tr>               

            <td align="center" nowrap  width="100">date11</td>

            <td align="center" nowrap  width="100">date12</td>

            <td align="center" nowrap  width="100">date13</td>                                                                                      

            <td align="center" nowrap  width="100">date14</td> 

            <td align="center" nowrap  width="100">date15</td>                                                                                      

            <td align="center" nowrap  width="100">date16</td>             

       </tr>  

       <tr>               

            <td align="center" nowrap  width="100">date21</td>

            <td align="center" nowrap  width="100">date22</td>

            <td align="center" nowrap  width="100">date23</td>                                                                                      

            <td align="center" nowrap  width="100">date24</td> 

            <td align="center" nowrap  width="100">date25</td>                                                                                      

            <td align="center" nowrap  width="100">date26</td>             

       </tr>  

       <tr>               

            <td align="center" nowrap  width="100">date31</td>

            <td align="center" nowrap  width="100">date32</td>

            <td align="center" nowrap  width="100">date33</td>                                                                                      

            <td align="center" nowrap  width="100">date34</td> 

            <td align="center" nowrap  width="100">date35</td>                                                                                      

            <td align="center" nowrap  width="100">date36</td>             

       </tr>  

 

 </body>

jokey01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Jquery实现表头固

最近在网上看到一段十分精简的实现表头固定的脚本，刚好项目中需要，于是利用Jquery进行重写和简单的封装，基本可以在不改动现有表格的基础上实现表头固定，而且可以支持在同一个页面有多个table。 .tableDiv{ overflow-x:hidden; BORDER-RIGHT: 1px
复制链接

扫一扫