<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就是你需要的【锁定列的横向滚动】哦