zoukankan      html  css  js  c++  java
  • js Table冻结表头示例代码

    Table冻结表头的js实现代码。
    Table冻结表头:
    <script type="text/javascript">
    //冻结table的表头 
    function fixupFirstRow(tab) { 
    var div=tab.parentNode; 
    if(div.className.toLowerCase()=="freezediv"){ 
    tab.rows[0].style.zIndex="1"; 
    tab.rows[0].style.position="relative"; 
    div.onscroll = function(){ 
    var tr = tab.rows[0]; 
    tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); 
    tr.style.left=-1; 



    //加载

    //by www.jbxue.com
    window.onload = function(){ 
    var tab=document.getElementById("freezedivTable"); 
    if(tab){ 
    fixupFirstRow(tab); 


    </script> 

    html源码: 
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <script type="text/javascript"> 
    function fixupFirstRow(tab) { 
    var div=tab.parentNode; 
    if(div.className.toLowerCase()=="freezediv"){ 
    tab.rows[0].style.zIndex="1"; 
    tab.rows[0].style.position="relative"; 
    div.onscroll = function(){ 
    var tr = tab.rows[0]; 
    tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); 
    tr.style.left=-1; 




    window.onload = function(){ 
    var tab=document.getElementById("freezedivTable"); 
    if(tab){ 
    fixupFirstRow(tab); 


    </script> 
    </head> 
    <body> 
    <div class="freezediv" style="100%;height:100px;overflow:auto;"> 
    <table id="freezedivTable" style="100%;" border="1"> 
    <tr bgcolor="white"> 
    <th width="25%">序号</th> 
    <th width="25%">内容</th> 
    <th width="25%">序号</th> 
    <th width="25%">内容</th> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>内容</td> 
    <td>11</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>内容</td> 
    <td>22</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>内容</td> 
    <td>33</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>4</td> 
    <td>内容</td> 
    <td>44</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>5</td> 
    <td>内容</td> 
    <td>55</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>6</td> 
    <td>内容</td> 
    <td>66</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>7</td> 
    <td>内容</td> 
    <td>77</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>8</td> 
    <td>内容</td> 
    <td>88</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>9</td> 
    <td>内容</td> 
    <td>99</td> 
    <td>内容</td> 
    </tr> 
    <tr> 
    <td>10</td> 
    <td>内容</td> 
    <td>1010</td> 
    <td>内容</td> 
    </tr> 
    </table> 
    </div> 
    </body> 
    </html> 
  • 相关阅读:
    python 全栈开发,Day13(迭代器,生成器)
    python 全栈开发,Day12(函数的有用信息,带参数的装饰器,多个装饰器装饰一个函数)
    python 全栈开发,Day11(函数名应用,闭包,装饰器初识,带参数以及带返回值的装饰器)
    关于1024:堆栈下溢的错误(1024. Stack Underflow Occurred)
    Quick 3.3 final 加载ccs的变化
    Quick 3.3 的代码资源加密
    quick code ide设置分辨率
    quick3.3rc1导入工程到ADT
    lua 基本语法
    as3 阻止后续侦听器
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3272303.html
Copyright © 2011-2022 走看看