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