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> 
  • 相关阅读:
    [PHP] php调用不存在的方法会自动调用 __call 魔术方法
    [PHP] laravel框架响应json信息中文禁止unicode编码
    [PHP] php中的trait代码复用方式
    [nginx] 解决:upstream timed out (110: Connection timed out) while reading response header from upstream
    [linux] Linux下格式化JSON程序-jq
    [git] Git Clean 清除 untrack 没有加入版本库的文件
    goland终端如何导入github上的包
    calico 配置 BGP Route Reflectors
    改善 Kubernetes 上的 JVM 预热问题
    golang开源对象存储
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3272303.html
Copyright © 2011-2022 走看看