永恒表头&lt

<!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
*/
    }
    
</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 (){  

// 在页面加载成功后调用该格局
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>九千</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>一千000</td><td>凌霄殿</td><td>国王</td></tr>
          
 <tr><td>19</td><td>元阳上帝</td><td>男</td><td>九千</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>

<html>
<body>
<div id=”box”>
<table id=”tab”>
</table>
</div>
</body>
</html>

 

 

<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;/** 设置当文本过长时换行 */

// 在页面加载成功后调用该措施

调用

scroll(“tab”,”box”,1);  

 

//固定表头
/**
* 作用:固定表头
* 参数 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”;
};
};

 

th{
height:24px;
width:50px;/** 不管是一定像素或是百分比,应与相应数据列的大幅度一致
*/
line-height:24px;
background-color:#cfc;
}
</style>

}