jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】
更新時(shí)間：2016年08月01日 15:54:43 作者：Quber
這篇文章主要介紹了jQuery實(shí)現(xiàn)的表頭固定效果,結(jié)合完整實(shí)例形式分析了jQuery基于插件實(shí)現(xiàn)的表頭固定功能與用法,非常簡單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的表頭固定效果。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體實(shí)現(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實(shí)例文件
內(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實(shí)現(xiàn)表頭固定效果（挺不錯(cuò)的?。。。?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>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
- 表頭固定(利用jquery實(shí)現(xiàn)原理介紹)
- 基于jquery的表頭固定的若干方法
- jQuery中關(guān)于ScrollableGridPlugin.js（固定表頭）插件的使用逐步解析
- 基于jquery的固定表頭和列頭的代碼
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
- jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序?qū)嵗治?/a>
- jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
- JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
相關(guān)文章
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見到過吧，其實(shí)實(shí)現(xiàn)起來很賤的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友可以參考下2013-12-12
jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫效果無刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫效果無刷新柱狀圖投票代碼,通過使用jquery動(dòng)態(tài)操作頁面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
本篇文章是基于JQuery在線制作的ppt在線演示，非常高大尚，效果非常好，需要的朋友可以參考下。2015-09-09
JavaScript中利用jQuery綁定事件的幾種方式小結(jié)
這篇文章主要介紹了JavaScript中利用jQuery綁定事件的幾種方式小結(jié),包括不調(diào)用jQuery的"原生js"實(shí)現(xiàn)方式,需要的朋友可以參考下2016-03-03
jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼
前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁的圖片有這樣一種效果：當(dāng)向下拉動(dòng)滾動(dòng)條時(shí)下面的圖片才開始加載，就是說它不會(huì)一下子把所有的圖片都加載出來，拉動(dòng)滾動(dòng)條后用戶看到了才會(huì)顯示，這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。2010-02-02
瀏覽器端跨域訪問一直是個(gè)問題, 多數(shù)研發(fā)人員對(duì)待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時(shí)候,時(shí)不時(shí)地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級(jí)域名跨域訪問的問題.2009-12-12
jQuery 3.0 的 setter和getter 模式詳解
這篇文章主要介紹了jQuery 3.0 的 setter和getter 模式詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的思路及核心代碼，需要的朋友可以參考下2014-06-06
這篇文章主要介紹了jQuery中:lt選擇器用法,實(shí)例分析了:lt選擇器的功能、定義及匹配小于指定索引值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)左右無縫輪播圖的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05