jQuery实现表头固定效果的实例代码

2024-10-22 00:52:28

一、新建一js文件jQuery_FixedTableHead.js

内容如下：

代码如下:

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {

var obj = document.getElementById("tableHeaderDiv" + tableId);

if (obj) {

jQuery(obj).remove();

}

var browserName = navigator.appName;

var ver = navigator.appVersion;

var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows")));

var content = document.getElementById(tableParentDivId);

var scrollWidth = content.offsetWidth - content.clientWidth;

var tableOrg = jQuery("#" + tableId)

var table = tableOrg.clone();

table.attr("id", "cloneTable");

var tableClone = jQuery(tableOrg).find("tr").each(function() {

});

var tableHeader = jQuery(tableOrg).find("thead");

var tableHeaderHeight = tableHeader.height();

tableHeader.hide();

var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {

return jQuery(this).width();

});

var tableCloneCols = jQuery(table).find("thead tr:first td")

if (colsWidths.size() > 0) {

for (i = 0; i < tableCloneCols.size(); i++) {

if (i == tableCloneCols.size() - 1) {

if (browserVersion == 8.0)

tableCloneCols.eq(i).width(colsWidths[i] + scrollWidth);

else

tableCloneCols.eq(i).width(colsWidths[i]);

} else {

tableCloneCols.eq(i).width(colsWidths[i]);

}

var headerDiv = document.createElement("div");

headerDiv.appendChild(table[0]);

jQuery(headerDiv).css("height", tableHeaderHeight);

jQuery(headerDiv).css("overflow", "hidden");

jQuery(headerDiv).css("z-index", "20");

jQuery(headerDiv).css("width", "100%");

jQuery(headerDiv).attr("id", "tableHeaderDiv" + tableId);

jQuery(headerDiv).insertBefore(tableOrg.parent());

}

二、Html实例文件

内容如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>qubernet@163.com_jQuery实现表头固定效果（挺不错的！！！）</title>

.itemList

{

border: solid 1px #cccccc;

overflow: hidden;

width: 100%;

border-collapse: collapse;

}

.itemList td

{

padding: 0px 0px 0px 0px;

color: #444444;

border: solid 1px #cccccc;

text-align: center;

line-height: 20px;

}

</style>

jQuery(function() {

jQuery.fn.CloneTableHeader("tab1", "div1");

});

</script>

</head>

<body>

<thead>

<tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold;

padding: 0px 0px 0px 0px;">

<td>

列1

</td>

<td>

列2

</td>

<td>

列3

</td>

<td>

列4

</td>

</tr>

</thead>

<tbody>

<tr><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td><td>我是测试的数据行…………</td></tr>

</tbody>

</table>

</div>

</form>

</body>

</html>

注意：记得引入jQuery类库文件。

表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美.而且很多都是基于固定的表格,在编码时多写一个固定的表头,对于动态生成的不知道多少列的表格就无从下手.而且例子中大多只能满足限定高度的情况,如果限定宽度,出现横向滚动条就无能为力了. 我的目的就是要像jquery-ui那样,找到页面上存在的表格,调用一个方法就可以实现固定表头的功能.趁着动手学习写jquery插件的机会,自己写了一个表头固定的插件. 使用方式和jquery-ui中的插件一样,只需要一行代码 $
基于jquery的表头固定的若干方法

A:使用JQuery UI插件,用DIV替换table,overflow-y:hidden达到滚动,让 thead绝对定位达到固定的目的,方法如下: 复制代码代码如下: (function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ va
JQuery拖动表头边框线调整表格列宽效果代码

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.
jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析

这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教. /*! * This plug-in is de
基于jquery的固定表头和列头的代码

复制代码代码如下: <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)
jQuery实现带分组数据的Table表头排序实例分析

本文实例讲述了jQuery实现带分组数据的Table表头排序.分享给大家供大家参考,具体如下: 如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变从网上找了一段常规的table排序,改了改,以满足"分组支持",贴在这里备份 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
jQuery实现冻结表头的方法

本文实例讲述了jQuery实现冻结表头的方法.分享给大家供大家参考.具体如下: 前段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也找过相应的脚本,但是不怎么理想所以就自己写了,但是目前由于项目仅仅用到了表头的冻结,而不需要指定列冻结所以目前只能算个不完整的脚本,不过一般的仅仅需要表头冻结就可以使用了),现在先看看截图: 这样实现了表头的冻结,下面表体内容可以自由滚动看下代码: 复制代码代码如下: //为jquery扩展一个
jQuery实现的表头固定效果实例【附完整demo源码下载】

本文实例讲述了jQuery实现的表头固定效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体实现步骤如下: 一.新建一js文件jQuery_FixedTableHead.js 内容如下: jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { var obj = document.getElementById("tableHeaderDiv" + tableId); if (obj) { jQue
jQuery EasyUI学习教程之datagrid点击列表头排序

这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q
jQuery实现表头固定效果的实例代码

一.新建一js文件jQuery_FixedTableHead.js 内容如下: 复制代码代码如下: jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) { var obj = document.getElementById("tableHeaderDiv" + tableId); if (obj) { jQuery(obj).remove(); } var browserName = navigator.a
jQuery实现拖动效果的实例代码

jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">
jquery实现下拉框功能效果【实例代码】

说不清楚,直接上图 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin
jquery实现表格中点击相应行变色功能效果【实例代码】

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
jQuery自定义图片上传插件实例代码

摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片效果调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
animate 实现滑动切换效果【实例代码】

今天和大家分享一下用 animate 实现滑动切换效果的小例子大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: 1.slideDown() 2.slideUp() 3.slideToggle() 但是以上的滑动不太方便控制其滑动的方向,所以我们还是自己动手写一个吧... 其代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equ
基于jQuery实现仿51job城市选择功能实例代码

前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
jquery跟随屏幕滚动效果的实现代码

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc
jQuery实现下拉菜单的实例代码

基本效果是这样的~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width:

jQuery实现表头固定效果的实例代码

相关推荐

随机推荐