Table冻结多行表头
jopen
10年前
Table冻结多行表头
<script type="text/javascript"> function fixupFirstRow(tab,num) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ for(var i=0;i<num;i++){ tab.rows[i].style.zIndex="1"; tab.rows[i].style.position="relative"; } var tr; div.onscroll = function(){ for(var j=0;j<num;j++){ tr = tab.rows[j]; tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); tr.style.left=-1; } } } } window.onload = function(){ var tab=document.getElementById("freezedivTable"); if(tab){ //4 -- 表示冻结四行 fixupFirstRow(tab,4); } } </script>
html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function fixupFirstRow(tab,num) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ for(var i=0;i<num;i++){ tab.rows[i].style.zIndex="1"; tab.rows[i].style.position="relative"; } var tr; div.onscroll = function(){ for(var j=0;j<num;j++){ tr = tab.rows[j]; tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); tr.style.left=-1; } } } } window.onload = function(){ var tab=document.getElementById("freezedivTable"); if(tab){ //4 -- 表示冻结四行 fixupFirstRow(tab,4); } } </script> </head> <body> <div class="freezediv" style="width:100%;height:150px;overflow:auto;"> <table id="freezedivTable" style="width:100%;" border="1"> <tr bgcolor="white"> <th width="50%" colspan="2">序号</th> <th width="50%" colspan="2">内容</th> </tr> <tr bgcolor="white"> <th width="25%">序号</th> <th width="25%">内容</th> <th width="25%">序号</th> <th width="25%">内容</th> </tr> <tr bgcolor="white"> <td>1</td> <td>内容</td> <td>11</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>2</td> <td>内容</td> <td>22</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>3</td> <td>内容</td> <td>33</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>4</td> <td>内容</td> <td>44</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>5</td> <td>内容</td> <td>55</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>6</td> <td>内容</td> <td>66</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>7</td> <td>内容</td> <td>77</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>8</td> <td>内容</td> <td>88</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>9</td> <td>内容</td> <td>99</td> <td>内容</td> </tr> <tr bgcolor="white"> <td>10</td> <td>内容</td> <td>1010</td> <td>内容</td> </tr> </table> </div> </body> </html>