爱学记
表头固定怎么设置 jQuery实现表头固定效果的实例代码
jQuery实现表头固定效果的实例代码
一 新建一js文件jQuery_FixedTableHead js
内容如下
代码如下: jQuery fn CloneTableHeader = function(tableId tableParentDivId) {
var obj = document getElementById("tableHeaderDiv" + tableId);
if (obj) {
jQuery(obj) remove();
}
var browserName = navigator appName;
var ver = navigator appVersion;
var browserVersion = parseFloat(ver substring(ver indexOf("MSIE") + ver lastIndexOf("Windows")));
var content = document getElementById(tableParentDivId);
var scrollWidth = content offsetWidth content clientWidth;
var tableOrg = jQuery("#" + tableId)
var table = tableOrg clone();
table attr("id" "cloneTable");
var tableClone = jQuery(tableOrg) find("tr") each(function() {
});
var tableHeader = jQuery(tableOrg) find("thead");
var tableHeaderHeight = tableHeader height();
tableHeader hide();
var colsWidths = jQuery(tableOrg) find("tbody tr:first td") map(function() {
return jQuery(this) width();
});
var tableCloneCols = jQuery(table) find("thead tr:first td")
if (colsWidths size() > ) {
for (i = ; i < tableCloneCols size(); i++) {
if (i == tableCloneCols size() ) {
if (browserVersion == )
tableCloneCols eq(i) width(colsWidths[i] + scrollWidth);
else
tableCloneCols eq(i) width(colsWidths[i]);
} else {
tableCloneCols eq(i) width(colsWidths[i]);
}
}
}
var headerDiv = document createElement("div");
headerDiv appendChild(table[ ]);
jQuery(headerDiv) css("height" tableHeaderHeight);
jQuery(headerDiv) css("overflow" "hidden");
jQuery(headerDiv) css("z index" " ");
jQuery(headerDiv) css("width" " %");
jQuery(headerDiv) attr("id" "tableHeaderDiv" + tableId);
jQuery(headerDiv) insertBefore(tableOrg parent());
二 Html实例文件
内容如下
代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" "< xmlns="
<head runat="server">
<title>qubernet@ _jQuery实现表头固定效果（挺不错的！！！）</title>
<script src=jquery min js type=text/javascript></script>
<script src=jQuery_FixedTableHead js type=text/javascript></script>
<style type=text/css>
itemList
{
border: solid px #cccccc;
overflow: hidden;
width: %;
border collapse: collapse;
}
itemList td
{
padding: px px px px;
color: # ;
border: solid px #cccccc;
text align: center;
line height: px;
}
</style>
<script type=text/javascript>
jQuery(function() {
jQuery fn CloneTableHeader("tab " "div ");
});
</script>
</head>
<body>
<form id="form " runat="server">
<div >
<table cellpadding=" " id="tab " cellspacing=" " border= class="itemList">
<thead>
<tr style="background color: #eeeeee; margin: px; line height: px; font weight: bold;
padding: px px px px;">
<td>
列
</td>
<td>
列
</td>
<td>
列
</td>
<td>
列
</td>
</tr>
</thead>
<tbody>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>
</tbody>
</table>
</div>
</form>
</body>
</>
lishixinzhi/Article/program/Java/JSP/201311/20454
微信收款码
支付宝收款码