网上找了好多现成的。结果没一个能成。只得自己动手。

(function($){
$.fn.fixHeader = {
init : function(obj){
var p = obj.parent();
//绑定事件
p.scroll(internalScroll); //获取表格第一行
var head = obj.children("thead tr th:first");
if (!head || head.length == 0) {
var body = obj.children("tbody")[0];
head = $(body.children[0].children[0]);
} var headHeight = head.height(); //创建新层
var headDiv = $("<div></div>").appendTo(p);
headDiv.css({
"width": p[0].scrollWidth,
"position":"absolute",
"top": p.offset().top,
"display" : "none",
"background-color":"#f5f5f5",
"height": headHeight
}); //克隆第一行
var table = $("<table id='tblFixHeader'></table>").appendTo(headDiv);
$(obj[0].attributes).each(function () {
if (this.name == "id" || this.name == "ID" || this.name == "Id") return true;
if (this.value.indexOf("background-color") > -1) {
table.attr(this.name, this.value.replace(new RegExp("background-color", "g"),""));
} else {
table.attr(this.name, this.value);
}
});
table.css("text-align", "center").css("background-color", null); var tr = $("<tr></tr>").appendTo(table);
if (body) {
$(body.children[0]).children().each(function() {
var td = $("<td></td>").appendTo(tr);
td.css({
"width" : $(this).width(),
"font-size" : $(this).css("font-size"),
"background-color" : $(this).css("background-color"),
"font-weight" : "bold"
});
td.text($(this).text());
});
} //滚动事件
function internalScroll() {
var top = obj.scrollTop();
if (top <= 100 - headHeight) {
headDiv.css("display","");
}else{
headDiv.css("display","none");
}
$("#btnTest").val(top + " " + head.height());
} $(window).resize(function() {
setTimeout(100, doResize());
}); function doResize() {
headDiv.css("width", p[0].scrollWidth);
var tbl = $("#tblFixHeader");
if (tbl && tbl.length == 1) {
var line = obj.children().get(0).children[0];
if (line) {
var line2 = tbl.children().get(0).children[0];
if (line2) {
for (var i = 0; i < line.children.length; i++) {
$(line2.children[i]).css("width", $(line.children[i]).css("width"));
}
}
}
}
}
}
};
})(jQuery);

好用,就拿走。

Jquery 表格固定表头的更多相关文章

  1. jQuery制作多表格固定表头、切换表头的特效

    做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...

  2. bootstrap表格固定表头,表格内容滚动条滚动显示

    直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jQuery 表格

    jQuery 表格插件汇总     本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...

  6. jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...

  7. JQuery固定表头插件fixedtableheader源码注释

    在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...

  8. (转)用JQuery实现Fix表头表格

    本文转载自:http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html 我的技术要点: 1.用两个表,其中一个是表头,另一个是表格做表体 ...

  9. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

随机推荐

  1. Islands and Bridges(POJ 2288状压dp)

    题意:给你一个图和每个点的价值,边权值为连接两点权值的积,走哈密顿通路,若到达的点和上上个点相连则价值加三点乘积,求哈密顿通路的最大价值,和最大价值哈密顿通路的条数. 分析:开始看这个题很吓人,但想想 ...

  2. bzoj3884: 上帝与集合的正确用法 欧拉降幂公式

    欧拉降幂公式:http://blog.csdn.net/acdreamers/article/details/8236942 糖教题解处:http://blog.csdn.net/skywalkert ...

  3. HDU-3001 Travelling

    http://acm.hdu.edu.cn/showproblem.php?pid=3001 从任何一个点出发,去到达所有的点,但每个点只能到达2次,使用的经费最小.三进制 Travelling Ti ...

  4. ubuntu安装nginx+php

    1.安装nginx aptitude search nginx sudo apt-get install nginx 2.安装php sudo apt-get install php5 sudo ap ...

  5. 瞬间从IT屌丝变大神——HTML规范

    HTML规范包含以下内容: DTD统一用<!DOCTYPE HTML PUBLIC "_//W3C//DTD XHTML 1.0 Transitional//EN"" ...

  6. angularJS笔记

    1.MVC ng-app: html表头处,每个htnl文件只能有一个ng-app ng-controller :js文件中定义 ng-model:只要引用了angularJS就可以使用 js文件代码 ...

  7. 迁移web.py项目至git@osc的项目演示平台

    1. 开启演示平台 选择WSGI,输入应用名称,即是演示网页的网址. 2. web.py代码迁移 将Python的site-packages目录下的web文件夹复制到代码目录下,与网页程序在同一个文件 ...

  8. NodeJS学习:爬虫小探

    说明:本文在个人博客地址为edwardesire.com,欢迎前来品尝. 今天来学习alsotang的爬虫教程,跟着把CNode简单地爬一遍. 建立项目craelr-demo 我们首先建立一个Expr ...

  9. JAVA NIO 类库的异步通信框架netty和mina

    Netty 和 Mina 我究竟该选择哪个? 根据我的经验,无论选择哪个,都是个正确的选择.两者各有千秋,Netty 在内存管理方面更胜一筹,综合性能也更优.但是,API 变更的管理和兼容性做的不是太 ...

  10. Native libraries .so.XY failing to link at runtime

    What you need to do is edit the configure file. And find out this: SLIBNAME='$(SLIBPREF)$(FULLNAME)$ ...