js怎么让table的列头固定

JavaScript024

js怎么让table的列头固定,第1张

方法vart,n,cwindow.onload=function(){t=document.getElementById("tb")t.rows[0].style.height="50px"//在这里设置高度}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">

<html xmlns=">

<head>

<style type='text/css'>

body{

width:140px

height:200px

margin:160px auto

}

</style>

</head>

<body>

<div>

<div style="overflow:autoheight:209pxwidth:140pxposition:relativeborder-bottom:1px solid #333" id="tb">

<table border="1" id="tbl"$amp>amp$lttr$amp>amp$lttd colspan=2 style="width:114px">sdfsdfdf</td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs1</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs2</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs3</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs4</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs5</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs6</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs7</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs8</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdfs9</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdf10</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdf11</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lttr$amp>amp$lttd>sdfsdf12</td$amp>amp$lttd$amp>amp$ltimg src='images/close.gif' /$amp>amp$lt/td$amp>amp$lt/tr$amp>amp$lt/table>

</div>

<table border="1" id="aaa" style="position:absolutetop:160pxbackground:#ffffff"$amp>amp$lttr$amp>amp$lttd colspan=2 style="width:114px">sdfsdfdf</td$amp>amp$lt/tr$amp>amp$lt/table>

</div>

</body>

</html>

<script type='text/javascript'>

onload = init

function init(){

var imgs = document.getElementById("tb").getElementsByTagName("img")

for(var i=0i<imgs.lengthi++){

imgs[i].onclick = changeSp

}

}

function changeSp(){

if(this.flg){

this.flg = false

this.src = "images/close.gif"

}else{

this.flg = true

this.src = "images/open.gif"

}

var imgs = document.getElementById("tb").getElementsByTagName("img")

for(var i=0i<imgs.lengthi++){

if(!imgs[i].flg){

document.getElementById("tbl").tBodies[0].insertBefore(this.parentNode.parentNode, imgs[i].parentNode.parentNode)

break

}

imgs[i].onclick = changeSp

}

updataSld()

}

function updataSld(){

var imgs = document.getElementById("tb").getElementsByTagName("img")

document.getElementById("aaa").tBodies[0].innerText document.getElementById("aaa").tBodies[0].innerText= "" :document.getElementById("aaa").tBodies[0].innerHTML =""

var tr0 = document.getElementById("tbl").tBodies[0].rows[0].cloneNode(true)

tr0.style.background = "#ffffff"

document.getElementById("aaa").tBodies[0].appendChild(tr0)

for(var i=0i<imgs.lengthi++){

if(imgs[i].flg){

var a = imgs[i].parentNode.parentNode.cloneNode(true)

原生的Jquery dataTable没有这个功能的支持哦，只能自己用js和css限定，非常复杂

如果一定要实现这种效果，建议使用easyui，调用简单方面，而且一个参数即可支持【锁定列的横向滚动】功能。

实例以及源代码：

http://www.zi-han.net/case/easyui/datagrid&tree.html#datagrid

第一个example就是你需要的【锁定列的横向滚动】哦