js实现html table 行,列锁定的简单实例
js实现html table 表头，指定列锁定
实现效果如下：
感兴趣的朋友可以直接复制出来运行看效果。
<!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">
/// 要锁定列的个数
/// </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">数学</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">化学</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;">
数学
</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;">
化学
</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>
<!-- 数据行 -->
<tr>
<td>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>学生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>
以上就是小编为大家带来的js实现html table 行,列锁定的简单实例全部内容了，希望大家多多支持我们~
相关推荐
-
js中获取 table节点各tr及td的内容简单实例
<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>
-
js给table赋值的实例代码
要求:用js实现给一个table赋值如上:(定义X=70 [HTML] <table class="table table-bordered"> <thead> <tr> <th colspan="5" class="active">经济条件较好地区学费表</th> </tr> <tr> <th></th> <th>4-8人班&
-
微信小程序使用第三方库Immutable.js实例详解
前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f
-
js实现table添加行tr、删除行tr、清空行tr的简单实例
如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"
-
jsp中实现带滚动条的table表格实例代码
如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width
-
js将table的每个td的内容自动赋值给其title属性的方法
如下所示: <!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>将table的每个td的内容自
-
jQuery+json实现动态创建复杂表格table的方法
本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+
-
利用js+css+html实现固定table的列头不动
话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct
-
js实现对table的增加行和删除行的操作方法
如下所示: <!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> <meta http-equiv="Co
-
js实现html table 行,列锁定的简单实例
js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!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"
-
js 弹出虚拟键盘修改密码的简单实例
实例如下: //定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, in pixels if (navigator.appName == "Netsc
-
js 判断一组日期是否是连续的简单实例
这是群里一朋友问的问题,当时我说判断下 day 是否相邻即可,后来细想,发现完全不对. 问题需求 给定5个相同格式的日期,怎么判断是否是连续5天呢? 我当时第一反应 getDay() 后排序,然后前后对比即可.. 但是细想,完全不对,比如本周一下周二,这样也会误判. 而且不仅仅这样的问题,还要跨月,跨年,闰月等问题. 然后就有了下面的代码. 让时间戳抹平一切吧 为了不纠结这些问题,我想到了时间戳,这货就可以完全忽略上述问题了,只要处理时间戳,最后比较即可. 然后我给了如下代码: let days
-
js获取指定字符前/后的字符串简单实例
如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script type="text/javascript"> /* string 字符串; str 指定字符; split(),用于把一个字符串分割成字符串数组; split(str)[0],读取
-
用js动态添加html元素,以及属性的简单实例
用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st
-
JS判断是否在微信浏览器打开的简单实例(推荐)
最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以判断是
-
原生js实现jquery函数animate()动画效果的简单实例
通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参
-
js判断某个字符出现的次数的简单实例
js判断某个字符出现的次数的简单实例 function patch(re,s){ //参数1正则式,参数2字符串 re=eval_r("/"+re+"/ig"); //不区分大小写,如须则去掉i,改为 re=eval_r("/"+re+"/g") var len = s.match(re).length; return len; } var str="Hello World"; alert("nu
-
js操作DOM--添加、删除节点的简单实例
js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""
-
js改变style样式和css样式的简单实例
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t