js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
更新時(shí)間：2016年10月13日 09:53:55 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
js實(shí)現(xiàn)html table 表頭，指定列鎖定
實(shí)現(xiàn)效果如下：
感興趣的朋友可以直接復(fù)制出來(lái)運(yùn)行看效果。
<!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>
<title>new document</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function FixTable(TableID, FixColumnNumber, width, height) {
/// <summary>
/// 鎖定表頭和列
/// <para> sorex.cnblogs.com </para>
/// </summary>
/// <param name="TableID" type="String">
/// 要鎖定的Table的ID
/// </param>
/// <param name="FixColumnNumber" type="Number">
/// 要鎖定列的個(gè)數(shù)
/// </param>
/// <param name="width" type="Number">
/// 顯示的寬度
/// </param>
/// <param name="height" type="Number">
/// 顯示的高度
/// </param>
if ($("#" + TableID + "_tableLayout").length != 0) {
$("#" + TableID + "_tableLayout").before($("#" + TableID));
$("#" + TableID + "_tableLayout").empty();
}
else {
$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
}
$('<div id="' + TableID + '_tableFix"></div>'
+ '<div id="' + TableID + '_tableHead"></div>'
+ '<div id="' + TableID + '_tableColumn"></div>'
+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
var oldtable = $("#" + TableID);
var tableFixClone = oldtable.clone(true);
tableFixClone.attr("id", TableID + "_tableFixClone");
$("#" + TableID + "_tableFix").append(tableFixClone);
var tableHeadClone = oldtable.clone(true);
tableHeadClone.attr("id", TableID + "_tableHeadClone");
$("#" + TableID + "_tableHead").append(tableHeadClone);
var tableColumnClone = oldtable.clone(true);
tableColumnClone.attr("id", TableID + "_tableColumnClone");
$("#" + TableID + "_tableColumn").append(tableColumnClone);
$("#" + TableID + "_tableData").append(oldtable);
$("#" + TableID + "_tableLayout table").each(function () {
$(this).css("margin", "0");
});
var HeadHeight = $("#" + TableID + "_tableHead thead").height();
HeadHeight += 2;
$("#" + TableID + "_tableHead").css("height", HeadHeight);
$("#" + TableID + "_tableFix").css("height", HeadHeight);
var ColumnsWidth = 0;
var ColumnsNumber = 0;
$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber++;
});
ColumnsWidth += 2;
if ($.browser.msie) {
switch ($.browser.version) {
case "7.0":
if (ColumnsNumber >= 3) ColumnsWidth--;
break;
case "8.0":
if (ColumnsNumber >= 2) ColumnsWidth--;
break;
}
}
$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
$("#" + TableID + "_tableFix").css("width", ColumnsWidth);
$("#" + TableID + "_tableData").scroll(function () {
$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
});
$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
}
if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
}
$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
$(document).ready(function () {
FixTable("MyTable", 1, 600, 400);
});
</script>
</head>
<body>
<table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
id="MyTable" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="text-align: center; width: 80px" rowspan="3">姓名</th>
<th style="text-align: center; width: 80px" rowspan="3">班級(jí)</th>
<th style="text-align: center" colspan="10">成績(jī)</th>
</tr>
<tr>
<th style="text-align: center" colspan="3">主科</th>
<th style="text-align: center" colspan="3">文科</th>
<th style="text-align: center" colspan="3">理科</th>
<th style="text-align: center; width: 80px" rowspan="2">總分</th>
</tr>
<tr>
<th style="text-align: center; width: 80px">語(yǔ)文</th>
<th style="text-align: center; width: 80px">數(shù)學(xué)</th>
<th style="text-align: center; width: 80px">英語(yǔ)</th>
<th style="text-align: center; width: 80px">政治</th>
<th style="text-align: center; width: 80px">歷史</th>
<th style="text-align: center; width: 80px">地理</th>
<th style="text-align: center; width: 80px">物理</th>
<th style="text-align: center; width: 80px">化學(xué)</th>
<th style="text-align: center; width: 80px">生物</th>
</tr>
<!--
<tr>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
姓名
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
班級(jí)
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
語(yǔ)文
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
數(shù)學(xué)
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
英語(yǔ)
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
政治
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
歷史
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
地理
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
物理
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
化學(xué)
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
生物
</th>
<th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
總分
</th>
</tr>
-->
</thead>
<tbody>
<!-- 數(shù)據(jù)行 -->
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
<tr>
<td>學(xué)生32</td>
<td>班級(jí)1</td>
<td>29</td>
<td>25</td>
<td>146</td>
<td>28</td>
<td>79</td>
<td>73</td>
<td>47</td>
<td>8</td>
<td>91</td>
<td>526</td>
</tr>
</tbody>
</table>
</body>
</html>
以上就是小編為大家?guī)?lái)的js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~
您可能感興趣的文章:
- jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
- js中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例
- js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
- js給table賦值的實(shí)例代碼
- js將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法
- jsp中實(shí)現(xiàn)帶滾動(dòng)條的table表格實(shí)例代碼
- 微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解
- 利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)
相關(guān)文章
通過(guò)sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證
本篇文章主要介紹了通過(guò)sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序表單彈窗實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了Javascript Promise用法詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了javascript實(shí)現(xiàn)在線客服效果的實(shí)例代碼，非常不錯(cuò)，這里推薦給大家，有需要的小伙伴可以參考下。2015-07-07
JavaScript function 的 length 屬性使用介紹
函數(shù)的 length 得到的是形參個(gè)數(shù)，如果函數(shù)內(nèi)部是通過(guò)arguments 調(diào)用參數(shù)，而沒(méi)有實(shí)際定義參數(shù)的話， length 只會(huì)的得到02014-09-09
JS用 或 || 來(lái)兼容FireFox!...2006-11-11
微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)五星評(píng)價(jià)功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要向大家分享如何在fckeditor編輯器插入代碼操作，這里腳本之家小編就為大家分享一下啊2007-05-05
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05