jQuery實現(xiàn)的表頭固定效果實例【附完整demo源碼下載】
更新時間：2016年08月01日 15:54:43 作者：Quber
這篇文章主要介紹了jQuery實現(xiàn)的表頭固定效果,結(jié)合完整實例形式分析了jQuery基于插件實現(xiàn)的表頭固定功能與用法,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的表頭固定效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體實現(xiàn)步驟如下：
一、新建一js文件jQuery_FixedTableHead.js
內(nèi)容如下：
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實例文件
內(nèi)容如下：
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實現(xiàn)表頭固定效果（挺不錯的?。。。?lt;/title>
<script src="jquery-1.7.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>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
<tr><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td><td>我是測試的數(shù)據(jù)行…………</td></tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JQuery基礎(chǔ)動畫操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
jQuery/$ is not defined報錯的幾種解決方法
jQuery最常見的錯誤之一是$ is not defined錯誤,本文主要介紹了jQuery/$ is not defined報錯的幾種解決方法,具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了jQuery中使用validate插件校驗表單功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了12個實用的jQuery代碼片段，本文給出了在新窗口打開鏈接、設(shè)置等高的列、jQuery預(yù)加載圖像、禁用鼠標(biāo)右鍵、設(shè)定計時器等實用代碼片段,需要的朋友可以參考下2016-03-03
通配符在控制input標(biāo)簽時相當(dāng)好用,這里簡單進行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下2016-05-05
在網(wǎng)上可以隨處找到這段代碼，但是沒有任何人解釋這段代碼，只要自己研究好久。2010-06-06
一款大氣的jQ網(wǎng)站幻燈片切換效果焦點圖代碼，有需要了解習(xí)的朋友可進入?yún)⒖?，這款jQuery網(wǎng)站幻燈片切換效果焦點圖非常大氣,要是網(wǎng)站首頁應(yīng)用此款效果,必定是蓬蓽生輝啊2013-09-09
基于jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星
下文與大家分享下使用jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
jQuery實現(xiàn)動態(tài)添加和刪除一個div
我想做一個可以動態(tài)添加刪除div的功能。中間遇到一個問題，最后在網(wǎng)友的熱心幫助下解決了，使用到的jquery方法和思想就是：事件的綁定和銷毀(unbind)2015-08-08