js實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例
更新時(shí)間：2016年10月13日 09:53:55 投稿：jingxian
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
js實(shí)現(xiàn)html table 表頭，指定列鎖定
實(shí)現(xiàn)效果如下：
感興趣的朋友可以直接復(fù)制出來運(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">班級</th>
<th style="text-align: center" colspan="10">成績</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">語文</th>
<th style="text-align: center; width: 80px">數(shù)學(xué)</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">物理</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;">
班級
</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;">
數(shù)學(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>
<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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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>班級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ī)淼膉s實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例全部內(nèi)容了，希望大家多多支持腳本之家~
您可能感興趣的文章:
- jQuery+json實(shí)現(xiàn)動態(tài)創(chuàng)建復(fù)雜表格table的方法
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡單實(shí)例
- js中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡單實(shí)例
- js實(shí)現(xiàn)對table的增加行和刪除行的操作方法
- js給table賦值的實(shí)例代碼
- js將table的每個(gè)td的內(nèi)容自動賦值給其title屬性的方法
- jsp中實(shí)現(xiàn)帶滾動條的table表格實(shí)例代碼
- 微信小程序使用第三方庫Immutable.js實(shí)例詳解
- 利用js+css+html實(shí)現(xiàn)固定table的列頭不動
相關(guān)文章
在開發(fā)中，數(shù)組的使用場景非常多，平日中也涉及到很多數(shù)組的api/相關(guān)操作，一直也沒有對這塊內(nèi)容進(jìn)行一塊整理總結(jié)，很多時(shí)候就算用過幾次這個(gè)api，在開發(fā)中也很容易忘記，還是要谷歌一下2018-06-06
JavaScript實(shí)現(xiàn)兩個(gè)數(shù)組的交集
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兩個(gè)數(shù)組的交集，給定兩個(gè)數(shù)組???nums1???和??nums2??返回它們的交集，輸出結(jié)果中的每個(gè)元素一定是唯一的，下文詳細(xì)介紹，需要的小伙伴可以參考一下2022-03-03
Bootstrap每天必學(xué)之工具提示（Tooltip）插件
Bootstrap每天必學(xué)之工具提示（Tooltip）插件，工具提示就是通過鼠標(biāo)移動選定在特定的元素上時(shí)，顯示相關(guān)的提示語，感興趣的小伙伴們可以參考一下2016-04-04
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于JavaScript原始值與包裝對象的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例
下面小編就為大家?guī)硪黄猨s控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
使用requestAnimationFrame實(shí)現(xiàn)js動畫性能好
requestAnimationFrame優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API，在運(yùn)行時(shí)瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷，這篇文章給大家詳細(xì)介紹使用requestAnimationFrame實(shí)現(xiàn)js動畫2015-08-08
本文主要介紹了js實(shí)現(xiàn)拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個(gè)并不那么常見的功能，你所不知道的事情，感興趣的小伙伴們可以參考一下2016-08-08
js Firefox 加入收藏夾功能代碼 兼容Firefox 和 IE
最近改用Firefox后，發(fā)現(xiàn)很多網(wǎng)站的“加入收藏”鏈接點(diǎn)擊無效了，后來發(fā)現(xiàn)原來是IE瀏覽器和Firefox瀏覽器的“加入收藏夾”的寫法是不同的。2009-12-12