首页
所有分类
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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
一个基于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
zip(1) greenlet(1) find(1) 进销存(1) csv(4) list(1) pytest(3) gevent(1) enumerate(1) Coroutine(1)
You might like
重置版宣传动画
2020/04/09 魔兽争霸
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php获取某个目录大小的代码
2008/09/10 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
canvas学习之API整理笔记（二）
2016/12/29 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JS实现li标签的删除
2019/04/12 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
Python微信公众号开发平台
2018/01/25 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
本科毕业生应聘自荐信范文
2014/06/26 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
同意报考证明
2015/06/17 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL