Jquery 表格固定表头
网上找了好多现成的。结果没一个能成。只得自己动手。
(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 表格固定表头的更多相关文章
- jQuery制作多表格固定表头、切换表头的特效
做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...
- bootstrap表格固定表头,表格内容滚动条滚动显示
直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- table 表格固定表头和第一列、内容可滚动
整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery 表格
jQuery 表格插件汇总 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...
- jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...
- JQuery固定表头插件fixedtableheader源码注释
在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...
- (转)用JQuery实现Fix表头表格
本文转载自:http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html 我的技术要点: 1.用两个表,其中一个是表头,另一个是表格做表体 ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
随机推荐
- 《Python CookBook2》 第四章 Python技巧 - 若列表中某元素存在则返回之 && 在无须共享引用的条件下创建列表的列表
若列表中某元素存在则返回之 任务: 你有一个列表L,还有一个索引号i,若i是有效索引时,返回L[i],若不是,则返回默认值v 解决方案: 列表支持双向索引,所以i可以为负数 >>> ...
- String.Format格式说明
原文地址:http://www.cnblogs.com/tuyile006/archive/2006/07/13/449884.aspx C#格式化数值结果表 字符 说明 示例 输出 C 货币 str ...
- andriod的简单用法2
1.在Activity中使用menu //创建菜单项 public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this ...
- JavaScript中的事件冒泡机制
事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...
- 数往知来C#之面向对象准备〈一〉
1.CLR加载编译源文件 注1.:当你点击调试或者生成解决方案的时候这就是一个编译过程首先CLR加载源文件也就是你写的代码(此代码在文件中是字符串)然后将项目中的嗲吗编译成IL代码进而生成程序集 证明 ...
- UVALive 4763
一开始,没敢写,感觉会超时...其实就是暴力搜索.DFS #include<iostream> #include<stdio.h> #include<string.h&g ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇:简介及目录》(附上完整工程文件)
G-3D引擎2D射击类游戏制作教程 游戏类型: 打飞机游戏属于射击类游戏中的一种,可以划分为卷轴射击类游戏. 视觉表现类型为:2D 框架简介: Genesis-3D引擎不仅为开发者提供一个3D游戏制作 ...
- How to fix “X: user not authorized to run the X server, aborting.”? -摘自网络
This is just a simple tips to solve a error message when you start your X session with “startx” comm ...
- hibernate 连接数据库时报错
错误信息 : com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: No operations allo ...
- cmake编译win下64位obs
obs是一款开源编码推流工具,简单易用,非常流行.一次项目中,发现本台式机I3处理器下32位obs推流CPU使用率100%.而使用的第三方设备在64位下,性能较好.所以需要编译64位obs并且编译相应 ...