jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
一、新建一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">
<head runat="server">
<title>qubernet@163.com_jQuery實(shí)現(xiàn)表頭固定效果（挺不錯(cuò)的?。。。?lt;/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>我是測試的數(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類庫文件。
- 表頭固定(利用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拖動表頭邊框線調(diào)整表格列寬效果代碼
- jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】
相關(guān)文章
WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡寫
一個(gè)簡單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧，對jquery小技巧感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要為大家詳細(xì)介紹了利用jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁對話框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。2015-05-05
jQuery中把a(bǔ)jax封裝得非常好。但是日常開發(fā)中，我偶爾還是會遇到ajax報(bào)錯(cuò)。本文進(jìn)行簡單分析一下ajax報(bào)錯(cuò)。需要的朋友可以參考下2016-12-12
如今jQuery在網(wǎng)站上普及的程度越來越高，所以，對于jQuery的使用，即使再小的一點(diǎn)認(rèn)識、一點(diǎn)優(yōu)勢、一點(diǎn)不足，也顯得越來越值得研究和探討2012-06-06
我們將探討不同的API jQuery來處理不同的瀏覽器事件,需要的朋友可以參考下2012-12-12
因?yàn)槲业牧粞园迨堑剐颍J(rèn)又只會展開最新的5條留言，對于較舊留言甚至是沙發(fā)的同學(xué)，很容易被忽略掉。2009-06-06
本文給大家分享一個(gè)自己編寫的使用jquery+javascript實(shí)現(xiàn)的國籍控件，效果非常不錯(cuò)，這里推薦給大家。2015-02-02
這篇文章介紹了Jquery定義對象(閉包)與擴(kuò)展對象成員的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12