JavaScript：固定table的表头

hehffyy 2013-08-17

展开全文

项目中遇到一个需要将表头固定显示的问题，花了点时间做出来了。不过好像还是有些问题需要优化，暂且记下代码，也给那些有需要没思路的朋友们提供一种解决方案。

固定表头究竟是怎么样一种效果？

即，当表格数据很多，以致于容器块元素出现滚动条。而在滚动滚动条的时候，数据行会被块元素遮挡，但保持表格的head部分始终在可视范围内。当然head部分应该在块元素的顶部，而非可视那么简单。

效果图如下：

初始化的画面：

拉动滚动条：

[html]view plaincopy
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">  
<html>  
<head>  
<title>固定表头</title>  
</head>  
<style>  
    #box{  
        height:214px;  
        width:500px;  
        overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */  
        position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */  
    }  
    table,tr,td,th{  
        border:1px solid #ccd;  
        border-collapse:collapse;  
    }  
    table{  
        width:100%;  
    }  
    td{  
        height:24px;  
        width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */  
        line-height:24px;  
        padding:3px 5px;  
        background-color:#ddd;  
        word-break:break-all;/** 设置当文本过长时换行 */  
  
    }  
      
    th{  
        height:24px;  
        width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */  
        line-height:24px;  
        background-color:#cfc;  
    }  
</style>  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
/**  
 * 功能：固定表头  
 * 参数   viewid     表格的id  
 *       scrollid   滚动条所在容器的id  
 *       size       表头的行数（复杂表头可能不止一行）  
 */  
function scroll(viewid,scrollid,size){  
        // 获取滚动条容器  
    var scroll = document.getElementById(scrollid);  
        // 将表格拷贝一份  
    var tb2 = document.getElementById(viewid).cloneNode(true);  
        // 获取表格的行数  
    var len = tb2.rows.length;  
        // 将拷贝得到的表格中非表头行删除  
    for(var i=tb2.rows.length;i>size;i--){  
        // 每次删除数据行的第一行  
                tb2.deleteRow(size);  
    }  
        // 创建一个div  
    var bak = document.createElement("div");  
        // 将div添加到滚动条容器中  
    scroll.appendChild(bak);  
        // 将拷贝得到的表格在删除数据行后添加到创建的div中  
    bak.appendChild(tb2);  
        // 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）  
    bak.style.position = "absolute";  
        // 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）  
    bak.style.backgroundColor = "#cfc";  
        // 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）  
    bak.style.display = "block";  
        // 设置创建的div的left属性为0，即该div与滚动条容器紧贴  
    bak.style.left = 0;  
        // 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头  
    bak.style.top = "0px";  
        // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端  
    scroll.onscroll = function(){  
                // 设置div的top值为滚动条距离滚动条容器顶部的距离值  
        bak.style.top = this.scrollTop+"px";  
    }  
}  
  
// 在页面加载完成后调用该方法  
window.onload = function (){  
    scroll("tab","box",1);  
}  
//-->  
</SCRIPT>  
<body>  
    <div id="box">  
        <table id="tab">  
            <tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>  
            <tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>  
            <tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>  
            <tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>  
            <tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>  
            <tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>  
            <tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>  
            <tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>  
            <tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>  
            <tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>  
            <tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>  
            <tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>  
            <tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>  
            <tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>  
            <tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>  
            <tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>  
            <tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>  
            <tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>  
            <tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>  
            <tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>  
            <tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>  
            <tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>  
            <tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>  
            <tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>  
            <tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>  
        </table>  
    </div>  
</body>  
</html>  