首页
所有分类
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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
Apr 24 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
锁(1) mysql.user(1) 性能优化(3) 事务(5) 逻辑架构(1) 缓存(3) 内存(1) limit(1) 策略(1) offset(1)
You might like
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Django框架模板介绍
2019/01/15 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
pycharm2020.1.2永久破解激活教程，实测有效
2020/10/29 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
super关键字的用法
2012/04/10 面试题
事业单位鉴定材料
2014/05/25 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014年民警工作总结
2014/11/25 职场文书
先进班集体申报材料
2014/12/26 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers