实用工具小学数学练习字帖生成在线画板函数绘制拼音字母表在线词典黄历查询中国历史 Excel函数模拟请求 json格式化

栏目分类:

子分类:

名师互学网

名师互学网用户登录

快速导航

当前搜索

当前分类

前沿技术软件开发系统运维产品运营生活办公面试经验考试题库

实用工具

学习工具小学数学练习字帖生成在线画板函数绘制拼音字母表在线词典黄历查询亲戚关系计算安全期计算中国历史 Excel函数模拟请求 json格式化浏览器指纹

名师互学网 > IT > 软件开发 > Web开发 > JavaScript

基于jquery的表头固定的若干方法

JavaScript 更新时间：2026-03-30 05:37:32 发布时间：1852天前 IT归档最新发布模块sitemap 名妆网法律咨询聚返吧英语巴士网伯小乐网商动力

A:使用JQuery UI插件，用DIV替换table，overflow-y:hidden达到滚动，让 thead绝对定位达到固定的目的，方法如下：
复制代码代码如下:
(function($){
$.chromatable = {
defaults: {
width: "900px",
height: "300px",
scrolling: "yes"
}
};
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options);
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr("ID") + ("wrapper");
$(this).css('width', options.width).addClass("_scrolling");
$(this).wrap('');
$(".scrolling_outer").css({'position':'relative'});
$("#"+$uniqueID).css(
{'border':'1px solid #CCCCCC',
'overflow-x':'hidden',
'overflow-y':'auto',
'padding-right':'17px'
});
$("#"+$uniqueID).css('height', options.height);
$("#"+$uniqueID).css('width', options.width);
$(this).before($(this).clone().attr("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':'1px'
}));
$('._thead').children('tbody').remove();
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#"+$uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling == "no") {
$("#"+$uniqueID).before('Expand table');
$("#"+$uniqueID).css({'padding-right':'0px'});
$(".expander").each(
function(int){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#"+$uniqueID).css({'height':'auto'});
$("#"+$uniqueID+" ._thead").remove();
$(this).remove();
});
});
$("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
}
});
$curr = $this.prev();
$("thead:eq(0)>tr th",this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
};
function resizer($this) {
$curr = $this.prev();
$("thead:eq(0)>tr th", $this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
};
})(jQuery);

页面调用如下：
复制代码代码如下:
...

...

...

Check out this header	Look here's another one	Wow, look at me!
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy

此方法IE和FF的兼容性都很好，推荐。
B：利用css滤镜实现，但FF不支持微软的东西，不兼容。DOM如下：
复制代码代码如下:

New document

	列头		列头		列头
h1	h2	h3	h4	h5	h6	h7
a	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
b	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
c	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7

C:最简单的方法当然是写2个table，用DIV的overflow-y:auto来实现，兼容性绝对没问题，麻烦之处在于2个table的对齐问题，另外用脚本赋予高度的话，需要加onresize()方法。DOM如下：
复制代码代码如下:

无标题文档

*,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;}
body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
body,td,div{font-size:12px;color:#333; line-height:150%;-webkit-text-size-adjust:none;}
select{ font-size:12px;}
a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:12px; }
a:link, a:visited {text-decoration:none;color:#333;}
a:hover, a:active {text-decoration:underline;color:#F00;}
ul,li,ol{list-style-type:none;}img {border:none;}
html{ overflow:hidden;}
.header{ width:1000px; margin:auto; height:40px; background:#ccc;}
.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}

	列头		列头		列头
h1	h2	h3	h4	h5	h6	h7

有时候最笨的方法也可能是最简单最好的方法，这样写的兼容性绝对安全，灵活性也不错。

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/114620.html

上一篇 Table隔行变色的JavaScript代码

下一篇 jquery animate图片模向滑动示例代码

JavaScript相关栏目本月热门文章

热门相关搜索

路由器设置木托盘宝塔面板儿童python教程心情低落朋友圈 vim 双一流学科专升本我的学校日记学校西点培训学校汽修学校情书化妆学校塔沟武校异形模板西南大学排名最精辟人生短句 6步教你追回被骗的钱南昌大学排名清朝十二帝北京印刷学院排名北方工业大学排名北京航空航天大学排名首都经济贸易大学排名中国传媒大学排名首都师范大学排名中国地质大学(北京)排名北京信息科技大学排名中央民族大学排名北京舞蹈学院排名北京电影学院排名中国戏曲学院排名河北政法职业学院排名河北经贸大学排名天津中德应用技术大学排名天津医学高等专科学校排名天津美术学院排名天津音乐学院排名天津工业大学排名北京工业大学耿丹学院排名北京警察学院排名天津科技大学排名北京邮电大学(宏福校区)排名北京网络职业学院排名北京大学医学部排名河北科技大学排名河北地质大学排名河北体育学院排名

关于我们文章归档网站地图联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号：晋ICP备2021003244-6号