js固定表头的实现（转）
原文鏈接：http://www.th7.cn/web/js/201509/121055.shtml
參考鏈接：http://www.jb51.net/article/102568.htm
寫(xiě)兩個(gè)表格，一個(gè)為表頭，另一個(gè)為表內(nèi)容。當(dāng)表內(nèi)容數(shù)據(jù)量比較大時(shí)，可以直接在表內(nèi)容所在的父容器進(jìn)行滾動(dòng)。以下為demo代碼實(shí)現(xiàn)：
<table> <thead class="header"> <tr><th>姓名</th><th>愛(ài)好</th> </tr> </thead></table><div id='scrollContainer' ><table class="table" cellspacing=0 cellpadding=0 id="mytable"><tbody><tr> <td>一介碼妞</td><td>吉他</td></tr></tbody></table></div><!-- 以下的js只是為了批量生成數(shù)據(jù)，真正固定表頭的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){ var row=$("#mytable >tbody>tr:first"); for(i=0;i<80;i++){$('table#mytable > tbody').append(row.clone()); } $("#mytable").fixedHeader(); });</script><script type="text/javascript">function fixTabHeaderScroll(tabid){ var $parent,$head,pTop,oTop,headTop,o;o=$("#"+tabid);oTop=o.height();$parent=o.parent();pTop=$parent.height();$head=$parent.prev();if (pTop <=oTop) {$head.css({$head.outerWidth(true)-scrollBarWidth+"px"});}else{$head.css({100+"%"});}}</script>分析
這種方式應(yīng)該是最簡(jiǎn)單，最明了的實(shí)現(xiàn)方式，表頭和表內(nèi)容分家，各管各家，對(duì)于表頭來(lái)說(shuō)，不管表內(nèi)容滾或者不滾，它都在哪里不離不棄。但是存在一個(gè)問(wèn)題，在表內(nèi)容沒(méi)有滾動(dòng)時(shí)，表頭和表身是垂直對(duì)齊的，一旦表身出現(xiàn)滾動(dòng)，新出現(xiàn)的滾動(dòng)條會(huì)占用表身的部分寬度，這就導(dǎo)致表身和表頭又不對(duì)齊。所以，我們需要在給兩個(gè)表格應(yīng)用同樣樣式的基礎(chǔ)上，再用js函數(shù)控制兩個(gè)的寬度，使他們寬度一致，大體思路是獲取滾動(dòng)條的寬，然后設(shè)置表頭的寬度減去滾動(dòng)條的寬度。
補(bǔ)充介紹Jquery的幾個(gè)參數(shù)：
offsetWidth ：當(dāng)前對(duì)象的的寬度包括滾動(dòng)條在內(nèi)
scrollWidth ：當(dāng)前對(duì)象的滾動(dòng)寬度不包括滾動(dòng)條在內(nèi)
在css的盒子模型中，最內(nèi)部是content，然后是padding、border、margin
width=content
innerWidth = width + padding
outerWidth = innerWidth + border
outerWidth(true) = outerWidth + margin
關(guān)于outerWidth屬性有一個(gè)傳入?yún)?shù)可以控制它包不包含外部的margin 為true的話包含，默認(rèn)不包含。
注意：要想表格相對(duì)于某個(gè)父容器做數(shù)據(jù)滾動(dòng)，則該父容器必須做如下設(shè)置：
(1)設(shè)置固定高度,不設(shè)置高度或者用百分比設(shè)置高度，滾動(dòng)不起作用
(2)設(shè)置屬性overflow-y:auto
必選項(xiàng)，否則當(dāng)表格數(shù)據(jù)過(guò)多時(shí)，不會(huì)產(chǎn)生滾動(dòng)條，而是自動(dòng)延長(zhǎng)該父容器的高度
(3)設(shè)置 position:relative;
若不設(shè)置，拷貝得來(lái)的表頭將相對(duì)于其設(shè)置該屬性為該值的父節(jié)點(diǎn)（或間接父節(jié)點(diǎn)）定位，如果沒(méi)有，則相對(duì)于body
我的代碼：
<html> <head> <title>test scrollTop</title> <style type="text/css"> #ttitle{ width:100px; border:1px solid blue; height:27px; } #tcontent{ width:100px; border:1px solid red; height:100px; overflow:auto; } tr{ height:20px; } table{ width:100px; border:1px solid black; } </style> <script type="text/javascript"> </script> </head> <body> <div id="ttitle"> <table> <th>姓名</th> <th>年齡</th> </table> </div> <div id="tcontent"> <table> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> <tr> <td>guo</td> <td>21</td> </tr> </table> </div> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的js固定表头的实现（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 坦克坦克怎么画
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？