萬盛學電腦網 >> 腳本專題 >> javascript >> 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") + 5, 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() > 0) {
for (i = 0; i < tableCloneCols.size(); i++) {
if (i == tableCloneCols.size() - 1) {
if (browserVersion == 8.0)
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[0]);
jQuery(headerDiv).css("height", tableHeaderHeight);
jQuery(headerDiv).css("overflow", "hidden");
jQuery(headerDiv).css("z-index", "20");
jQuery(headerDiv).css("width", "100%");
jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId);
jQuery(headerDiv).insertBefore(tableOrg.parent());
}
二、Html實例文件
內容如下：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>[email protected]_jQuery實現表頭固定效果（挺不錯的！！！）</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jQuery_FixedTableHead.js" type="text/javascript"></script>
<style type="text/css">
.itemList
{
border: solid 1px #cccccc;
overflow: hidden;
width: 100%;
border-collapse: collapse;
}
.itemList td
{
padding: 0px 0px 0px 0px;
color: #444444;
border: solid 1px #cccccc;
text-align: center;
line-height: 20px;
}
</style>
<script type="text/javascript">
jQuery(function() {
jQuery.fn.CloneTableHeader("tab1", "div1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style=" height: 250px; overflow:scroll;" id="div1">
<table cellpadding="0" id="tab1" cellspacing="0" border="0" class="itemList">
<thead>
<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;
padding: 0px 0px 0px 0px;">
<td>
列1
</td>
<td>
列2
</td>
<td>
列3
</td>
<td>
列4
</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>我是測試的
- 上一頁:jQuery插件編寫
- 下一頁:js過濾HTML標簽以及空格的思路及代碼
