如何在一个已有的table情况下, 固定表头, 滑动表身

原先只有: 它只是一截, 具体接收数据等交给dwz框架的底层实现了. 现在添加一段 js和css即可实现滑动.

<div id="listContainer">
<table class="linetable" id="treeMenu" width="100%"></table>
</div>

它的整页代码:<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="/WEB-INF/bluemobi-tag.tld" prefix="bmtag"%><%@ page language="java" import="java.util.Map" %><%@ page language="java" import="com.kid.model.Comment" %><%@ page language="java" import="java.util.List" %><script type="text/javascript">var webroot = "${webroot}";function ajaxDoneCallback(json){}navTab._closeOtherTab();</script><link rel="stylesheet" href="${webroot}/treetable/jquery.treetable.css" /><script src="${webroot }/res/dwz/jquery-1.7.2.js" type="text/javascript"></script><script src="${webroot}/treetable/jquery-ui.js"></script><script src="${webroot}/treetable/jquery.treetable.js"></script><script type="text/javascript">var id="";$(document).ready(function(){var heads = ["","评论内容","评论数","点赞数","hidden:"];var article = ${tNodes};$.TreeTable("treeMenu", heads, article);$("table tr").click(function() {//为表格的行添加点击事件var tr = $(this);//找到tr原色var td = tr.find("td");//找到td元素id = td[4].innerHTML;//获取隐藏的第四个列表内容：idvar array = id.split(":");if( array[0] != "article" && array[1]){document.getElementById("viewId").href='comment/view.do?id='+array[1];}else{document.getElementById("viewId").href='comment/view.do?id=';}})});function deleteItem(){if(id){var array = id.split(":");if(array[0] == "article"){if (confirm("确定删除该篇文章所有评论？")) {$.ajax({type : "POST",url : "comment/delete.do",data : {id : array[1],type:"article"},success : function(data) {}});}}else if(array[0] == "parent"){if (confirm("确定删除此条评论及其下的回复内容？")) {$.ajax({type : "POST",url : "comment/delete.do",data : {id : array[1],type:"parent"},success : function(data) {}});}}else{if (confirm("确定删除此条评论？")) {$.ajax({type : "POST",url : "comment/delete.do",data : {id : array[1],type:"child"},success : function(data) {}});}}}elsealert("请选择一条评论信息!");}function getTitleList(){}function viewItem(){if(id){var array = id.split(":");if(array[0] == "parent"){$.ajax({type : "POST",url : "comment/view.do",data : {id : array[2]},success : function(data) {}});}else{$.ajax({type : "POST",url : "comment/view.do",data : {id : array[1]},success : function(data) {}});}}elsealert("请选择一条评论信息!");}function titleChange(){//获得input输入框的内容var title = document.getElementById('title').value;var obj = document.getElementById('titleSelect');//如果输入的内容为空，所有的选项都匹配if(title!= '' && title.length>=2) {//获得option中的所有内容var allText = getSelectText();// 每个option的内容分割开来var eachOptin = new Array();eachOptin=allText.split(","); //字符分割obj.options.length=0;4000for (i=0;i<eachOptin.length-1 ;i=i*2 ){//如果option内容中有输入的内容就返回第一次匹配的位置（大于等于0），如果没有匹配的就返回-1var flag = eachOptin[i+1].indexOf(title) ;if(flag >=0) {obj.options.add(new Option(eachOptin[i+1],eachOptin[i]));}i++;}$("#titleSelect").click();}}function getSelectText(){//获得所有select标签var obj = document.getElementById('titleSelect').options;var length = document.getElementById('titleSelect').options.length;//因为该html中只有一个select标签，所以就是name = "titleSelect"代表的标签//alert(obj.length);//alert(obj[0]);//保存所有option 的值var allText;for(i=0;i<length;i++) {allText+= obj[i].value+','+obj[i].text+','; //关键是通过option对象的innerText属性获取到选项文本}allText = allText.substr(0,allText.length-1);return allText;}function getSelectTextChange(){var text = document.getElementById('titleSelect').options[document.getElementById('titleSelect').selectedIndex].text;document.getElementById('title').value=text;}</script><div class="pageHeader"><form id="pagerForm" method="post" action="comment/commentList.do"onsubmit="return navTabSearch(this);"><div class="searchBar"><table class="searchContent"><tbody><tr><td><label><bmtag:message messageKey="评论板块" /></label></td><td><select id="fileType" name="fileType" class="combox" ><option value="" ${comment.fileType==''?'selected="selected"':""}>--请选择--</option><option value="1" ${comment.fileType=='1'?'selected="selected"':""}>柿子树推荐</option><option value="2" ${comment.fileType=='2'?'selected="selected"':""}>柿子TV</option><option value="3" ${comment.fileType=='3'?'selected="selected"':""}>早期教育</option><option value="4" ${comment.fileType=='4'?'selected="selected"':""}>儿歌故事</option><option value="5" ${comment.fileType=='5'?'selected="selected"':""}>宝贝厨房增</option></select></td><td><label><bmtag:message messageKey="标题" /></label></td><td><span style="position: absolute; border: 1pt solid #c1c1c1; overflow: hidden; width: 188px; clip: rect(-1px, 190px, 190px, 170px);"><select name="titleSelect" id="titleSelect"style="width: 190px; height: 20px; margin: 0px;"onChange="getSelectTextChange();"><option value="" style="color: #c2c2c2;">--请选择--</option><option value="bj">北京</option><option value="sh">上海</option><option value="gz">广州</option><option value="s123">上123</option><option value="sz">苏州</option></select></span><span style="border: 1pt solid #c1c1c1; border-left: 1pt solid #c1c1c1; border-bottom: 1pt solid #c1c1c1; width: 170px;"><input type="text" autocomplete="off" name="title" id="title"value="" style="width: 170px; height: 15px; border: 0pt;"onChange="titleChange();"></span></td><td align="center"><bmtag:button messageKey="common.button.search" type="submit" id="formSubmitter" /></td></tr></tbody></table></div></form></div><div class="pageContent"><div class="panelBar"><ul class="toolBar"><li><bmtag:link href="#" messageKey="展开"onclick="jQuery('#treeMenu').treetable('expandAll'); return false;"dwzClass="delete" /></li><li><bmtag:link href="#" messageKey="收缩"onclick="jQuery('#treeMenu').treetable('collapseAll'); return false;"dwzClass="delete" /></li><li><bmtag:link href="/kid/admin/comment/commentList.do" id="viewId" isAuth="false" actionId="ACT-013-003" target="navTab"messageKey="common.icon.view" dwzClass="edit" /></li><li><bmtag:link onclick="deleteItem();"messageKey="common.icon.delete" dwzClass="delete" /></li></ul></div><div id="listContainer"> <table class="linetable" id="treeMenu" width="100%"></table> </div></div><!-- 获取 id="listContainer"表头内容, 并加入到创建的新的table里面去, 将新创建的table添加到class="pageContent"的div中去.--><script type="text/javascript"> $(document).ready(function(){ var listHead = $("#treeMenu").find("thead").html(); //获取现有表格的头部代码 var newHead = "<div class='newHeadContainer'><table style='width:100%;'><thead>"+listHead+"</thead></table></div>"; $(".pageContent").append($(newHead)); }); </script><!-- 通过div的class, 获取它下面的 table thead tr td:nth-child(第几列)--><style type="text/css"> #listContainer{ position: relative; height: 500px; overflow-y: auto; } .newHeadContainer{ width: 100%; position: absolute; left:0px; top:25px; z-index: 99; height: 19px; } .newHeadContainer table{ width:100%; height:100px; vertical-center:middle; } .newHeadContainer table td{ border: 1px solid #888; font-weight: normal; padding: 5px 15px 1px 15px; height: 15px; text-align: left; background: #EBEBEB url(images/bg-table-thead.png) repeat-x top left; } .newTHead{ width: 100%; height: 100%; } .td_left{ width: 406px; }.newHeadContainer table thead tr td:nth-child(1){width: 405px;}.newHeadContainer table thead tr td:nth-child(2){width: 226px;}.newHeadContainer table thead tr td:nth-child(3){width: 186px;}#listContainer table tbody tr td:nth-child(2){width: 227px;}#listContainer table tbody tr td:nth-child(3){width: 187px;}</style>注意: div的id 以及 table中的class名称, 和它里面的id 在下方复制时候注意修改.如果有</body> 则添加在它后面, 如果没有, 也可以将它添加在页面最下方.

<script type="text/javascript">
$(document).ready(function(){
var listHead = $("#treeMenu").find("thead").html();		//获取现有表格的头部代码
var newHead = "<div class='newHeadContainer'><table style='width:100%;'><thead>"+listHead+"</thead></table></div>";

$(".pageContent").append($(newHead));

});

</script>

<style type="text/css">
#listContainer{
position: relative;
height: 500px;
overflow-y: auto;
}
.newHeadContainer{
width: 100%;
position: absolute;
left:0px;
top:25px;
z-index: 99;
height: 19px;
}
.newHeadContainer table{
width:100%;
height:100px;
vertical-center:middle;
}
.newHeadContainer table td{
border: 1px solid #888;
font-weight: normal;
padding: 5px 15px 1px 15px;
height: 15px;
text-align: left;
background: #EBEBEB url(images/bg-table-thead.png) repeat-x top left;
}
.newTHead{
width: 100%;
height: 100%;
}
.td_left{
width: 406px;
}

<!-- 通过div的class, 获取它下面的 table thead tr td:nth-child(第几列) 可以对一个表格的一行中的各列设置css样式-->

.newHeadContainer table thead tr td:nth-child(1){ width: 405px;}.newHeadContainer table thead tr td:nth-child(2){ width: 226px;}.newHeadContainer table thead tr td:nth-child(3){ width: 186px;}#listContainer tabletbody tr td:nth-child(2){width: 227px;}#listContainer table tbody tr td:nth-child(3){width: 187px;}</style>