jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼

2019-11-20 22:41:19

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

一、新建一js文件jQuery_FixedTableHead.js

內(nèi)容如下：

復(fù)制代碼代碼如下:

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)容如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>qubernet@163.com_jQuery實(shí)現(xiàn)表頭固定效果（挺不錯(cuò)的?。。。?lt;/title>

.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>

jQuery(function() {

jQuery.fn.CloneTableHeader("tab1", "div1");

});

</script>

</head>

<body>

<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>

</tbody>

</table>

</div>

</form>

</body>

</html>

注意：記得引入jQuery類庫(kù)文件。

上一篇：js過(guò)濾HTML標(biāo)簽以及空格的思路及代碼

下一篇：如何阻止復(fù)制剪切和粘貼事件為了表單內(nèi)容的安全

學(xué)習(xí)交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注

新聞熱點(diǎn)

榮耀總裁趙明烏鎮(zhèn)演講：榮耀首款5G手機(jī)V30下月發(fā)布

2019-10-23 09:17:05

搜狐張朝陽(yáng)：回歸媒體是搜狐重新崛起的關(guān)鍵

2019-10-21 09:20:02

華為輪值董事長(zhǎng)郭平：虛擬技術(shù)創(chuàng)造現(xiàn)實(shí)價(jià)值

2019-10-21 09:00:12

滴滴英文服務(wù)上線兩周年用戶已超200萬(wàn)

2019-09-26 08:57:12

華為推出全球至快AI訓(xùn)練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國(guó)技術(shù)團(tuán)隊(duì)

2019-09-25 08:15:43

疑難解答

圖片精選

網(wǎng)友關(guān)注