首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery的固定表头和列头的代码

Posted in Javascript onMay 03, 2012 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript">// <![CDATA[ 
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", 2, 600, 200); 
}); 
// ]]></script> 
<style><!-- 
.style1 
{ 
width: 137px; 
} 
#MyTable 
{ 
border-top: 1px solid #cc0000; 
border-left: 1px solid #cc0000; 
} 
#MyTable td,th 
{ border-bottom:1px solid #cc0000; 
border-right: 1px solid #cc0000; 
} 
--></style> 
<p><br /> </p> 
<table id="MyTable" style="border-bottom-color: black; border-top-color: black; width: 1000px; height: 200px; color: #000000; border-right-color: black; font-size: medium; border-left-color: #15b0e1;" border="0" cellspacing="0" cellpadding="0"> 
<thead> 
<tr><th style="text-align: center; width: 80px;" rowspan="2"> </th><th class="style1" style="text-align: center;" rowspan="2">项目</th><th style="text-align: center; width: 80px;" rowspan="2">公示栏</th><th style="text-align: center;" colspan="9">dddddddd</th><th style="text-align: center;" rowspan="2" colspan="2"> 总分 </th></tr> 
<tr id="game"><th style="text-align: center;" colspan="2">语文 数学 </th><th style="text-align: center;" colspan="2">英语 政治 </th><th style="text-align: center;" colspan="2">历史 地理 </th><th style="text-align: center;" colspan="2">物理 化学 </th><th style="text-align: center; width: 80px;">生物 </th></tr> 
</thead> 
<tbody><!-- 数据行 --> 
<tr> 
<td> </td> 
<td class="style1"> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>ss </td> 
<td class="style1">上线时间 </td> 
<td>1 </td> 
<td>29 1</td> 
<td>25 2</td> 
<td>146 </td> 
<td>28 </td> 
<td>79 </td> 
<td>73 </td> 
<td>47 </td> 
<td>8 </td> 
<td>91 33</td> 
<td>526 qq</td> 
<td>dd</td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">在线人数 </td> 
<td>2 </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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td>s</td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td class="style1">学生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> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<p> </p>

基于jquery的固定表头和列头的代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js仿百度切换皮肤功能（html+css）
Jul 10 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
Jquery Easyui搜索框组件SearchBox使用详解（19）
Dec 17 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 #Javascript
ASP.NET中AJAX 调用实例代码
May 03 #Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 #Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 #Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 #Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 #Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 #Javascript
备份(2) 索尼ICF-36(1) 全局锁(1) 德生2P3(1) 贪吃蛇(2) update(2) 数据库卡死(1) python小游戏(5) 索引(8) tcp/ip(1)
You might like
php 实现进制转换(二进制、八进制、十六进制）互相转换实现代码
2010/10/22 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
javascript中clone对象详解
2014/12/03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
Bootstrap入门书籍之（五）导航条、分页导航
2016/02/17 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
js实现点击展开隐藏效果（实例代码）
2018/09/28 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
js获取浏览器地址（获取第1个斜杠后的内容）
2019/09/03 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
thinkphp5 路由分发原理
2021/03/18 PHP
Etam艾格英国官网：法国著名女装品牌
2019/04/15 全球购物
大学生演讲稿范文
2014/01/11 职场文书
CAD实训总结范文
2015/08/03 职场文书
2016国培研修心得体会
2016/01/08 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
创作书写之导游词实用技巧分享（干货）
2019/12/20 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS