jQuery实现冻结表头的方法

本文实例讲述了jQuery实现冻结表头的方法。分享给大家供大家参考。具体如下：

前段时间做项目时候由于需要显示一个列表，但是由于数据太多在滚动的时候表头必须冻结住，所以就写了下面这个脚本（曾经在网上也找过相应的脚本，但是不怎么理想所以就自己写了，但是目前由于项目仅仅用到了表头的冻结，而不需要指定列冻结所以目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了），现在先看看截图：

这样实现了表头的冻结，下面表体内容可以自由滚动

看下代码：

代码如下:

//为jquery扩展一个CloneTableHeader 方法
jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {
    //获取冻结表头所在的DIV,如果DIV已存在则移除
    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");
    //注意:需要将要冻结的表头放入thead中
    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) {//根据浏览器为冻结的表头宽度赋值(主要是区分IE8)
        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]);
            }
        }
    }
    //创建冻结表头的DIV容器,并设置属性
    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());
}

以上就是完整代码，现在看下如何使用:

只需在页面中加入以下脚本

代码如下:

<script type="text/javascript">
       jQuery(function() {
           jQuery.fn.CloneTableHeader("tab1", "div1");
       });
</script>

这样就可以了,传入表和表所在的DIV的ID就OK了,必须注意的是:要冻结的表头必须放入到thead中,否则无法实现冻结。

以上代码在IE6,7,8测试通过，FF和chrome会出现表头的宽度不准确的问题。

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery EasyUI学习教程之datagrid点击列表头排序

    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拖动表头边框线调整表格列宽效果代码

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

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

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

  • jQuery实现带分组数据的Table表头排序实例分析

    jQuery实现带分组数据的Table表头排序实例分析

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

  • jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析

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

  • 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实现的表头固定效果实例【附完整demo源码下载】

    jQuery实现的表头固定效果实例【附完整demo源码下载】

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

  • 基于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的固定表头和列头的代码

    复制代码 代码如下: <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实现冻结表头的方法

    jQuery实现冻结表头的方法

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

  • JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

  • JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • Jquery实现遮罩层的方法

    本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了): <!-- Status Bar Start --> <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl

  • jQuery晃动层特效实现方法

    本文实例讲述了jQuery晃动层特效实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery搜索子元素的方法

    jQuery搜索子元素的方法

    本文实例讲述了jQuery搜索子元素的方法.分享给大家供大家参考.具体分析如下: 1. children()方法 用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下: 复制代码 代码如下: children([selector]) $("#menu_ul").children().css("color", "blue"); 2. find()方法 用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下: 复制

  • jQuery实现伪分页的方法分享

    jQuery实现伪分页的方法分享

    本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q

随机推荐