首页
所有分类
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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
一个基于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
TimePickerView(1) vue-router-link(1) KVM(1) 本地化存储(1) Storage(1) click(1) 项目打包(2) Jmerte(1) 自定义组件(1) Yolov5(1)
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
用js实现上传图片前的预览（TX的面试题）
2007/08/14 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
XENON基于JSON变种
2010/07/27 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jQuery.each使用详解
2015/07/07 Javascript
每天一篇javascript学习小结（Boolean对象）
2015/11/12 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python实现k-means聚类算法
2018/02/23 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python map比for循环快在哪
2020/09/21 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
会计岗位职责
2013/11/08 职场文书
小学生获奖感言范文
2014/02/02 职场文书
暑期社会实践方案
2014/02/05 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
关于vue中如何监听数组变化
2021/04/28 Vue.js
Golang 链表的学习和使用
2022/04/19 Golang