`
j夫子
  • 浏览: 92741 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jquery-hftable:将普通table转化为表头固定table

    博客分类:
  • ui
阅读更多
/* 
* hftable 0.1 
* Copyright (c) 2014 赵俊夫 http://zjfhw.iteye.com
* Date: 2014-02-23
* 主要功能:将普通的Table的表头/表尾固定
* 特点:
1.该版本约定将表格第一行作为表头,所以不需要特别设置<thead>之类的标签标识表头,普通结构的table即可。
2.同上,如果设置了表尾固定,则约定表格的最后一行为表尾。
* 入参:options{
			fixHeader:true/fales	//是否固定表头,默认true
			fixFooter:true/false	//是否固定表尾,默认false
			width					//Table的宽度
			height					//Table的高度
*		}
*/ 

 

使用方法:

$("用id选择器选中要转换的table").createhftable({
			height:'100px',
			width:'700px',
			fixFooter:false
			});

 效果图:



 

下载:(附件)

  • 大小: 5.1 KB
3
0
分享到:
评论

相关推荐

    jquery-clone-tableheader table 头部固定

    "jquery-clone-tableheader" 是一个基于 jQuery 的插件,它的主要功能是复制表格的头部,在表格内容区域出现滚动条时,将复制的表头固定在屏幕顶端,确保用户在滚动查看数据时始终能看到列名。这种方法特别适用于大...

    移动端table固定表头与固定第一列

    这里我们假设有一个类名为`.table-first-col`的容器,包含了所有需要固定的第一列单元格。当然,实际应用中,你可能需要根据具体布局调整这个类名或者使用其他方法选择第一列。 为了处理滚动,可以监听滚动事件,当...

    基于jquery的table表头固定

    "基于jQuery的table表头固定"通常涉及到以下关键技术点: 1. **分离表头和主体**:首先,我们需要将HTML表格的thead部分与tbody部分分离,这样在进行滚动操作时,thead可以独立于tbody进行定位。 2. **CSS定位**:...

    基于Bootstrap table组件实现多层表头的实例代码

    在本文中,我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头,每个层次可以包含多个列。这种结构常用于展示复杂的数据关系,例如树形结构的数据。Bootstrap ...

    HTML Table固定表头完美实现

    接下来,我们将使用CSS来实现初步的固定表头效果。在`&lt;style&gt;`标签内,我们可以添加以下样式: ```css #fixed-header-table { width: 100%; border-collapse: collapse; } #fixed-header-table th, #fixed-...

    jquery表头固定、列固定完美解决方案

    `fixTable.js`是专门为解决表头和列固定问题编写的JavaScript插件。这个插件的工作原理大致如下: 1. **表头固定**:当用户滚动表格时,插件会检测到滚动事件,然后将表头复制并定位在表格上方,使其看起来像是固定...

    jQuery插件冻结行列、固定列固定行,html、table实现

    该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll",其主要功能是在表格滚动时保持顶部行和左侧列固定,以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...

    Jquery table固定表头,固定列,全浏览器兼容

    下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格,并确保全浏览器兼容。 首先,jQuery 是一个强大的 JavaScript 库,它简化了 DOM 操作、事件处理、动画和Ajax交互。在...

    网页table固定表头示例

    通常,table元素默认是静态定位(static),但为了实现固定表头,我们需要将表头(thead)和表格主体(tbody)设置为相对定位(relative)或绝对定位(absolute)。 1. **创建基本HTML结构**: 创建一个标准的HTML...

    css+jquery完美实现table表头固定显示(浮动)

    总的来说,结合CSS的`position: fixed`和jQuery的事件监听及样式调整,我们可以轻松实现table表头的固定显示,使用户在滚动查看大量数据时仍能清晰地看到列标题,提升交互体验。在实际开发中,这种技术广泛应用于...

    jquery-table2excel

    "jquery-table2excel"插件正是这样一种解决方案,它使得在网页上将表格数据导出为Excel格式变得轻而易举。 一、jQuery与表格操作 jQuery简化了DOM操作,使得开发者可以快速地选择、操作和修改HTML元素,包括表格...

    jQuery fixed-table.js锁定表头Table插件特效代码.zip

    为了解决这个问题,jQuery库提供了一个名为fixed-table.js的插件,它能实现表头固定的效果,使得在滚动页面时,表头始终保持可见,提高了用户的交互体验。 fixed-table.js插件是基于jQuery框架构建的,因此在使用前...

    jQuery实现表头固定表格内容滚动效果

    本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构。表头`&lt;thead&gt;`通常包含表的列名,而表体`&lt;tbody&gt;`则包含实际的数据行。例如: ```html ...

    HTML页面table表格固定行和列

    我们可以创建一个包含表头的新`&lt;div&gt;`,并将其设置为绝对定位,使其始终在页面顶部显示。同时,我们需要确保表头的高度与实际表格的第一行高度一致,以保持视觉一致性。例如: ```html .fixed-header { position...

    jquery 固定表头和列

    这样,当表头切换为固定定位时,会有平滑的过渡效果。 5. **列固定**: 固定列的实现相对复杂,需要创建一个新的包含固定列的`div`,并在滚动时更新其内容和位置。这个过程涉及到更多的CSS和JavaScript操作,可能...

    固定table表头的插件

    为了解决这个问题,"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置,无论用户如何滚动,表头始终可见,提高了用户的浏览体验。 在HTML中,实现固定表头通常需要CSS和JavaScript的配合。...

    Sticky-Stuff:一个用于粘性表头的 jQuery 插件

    入门重置表的 css 并将克隆的标题设置为顶部 table { margin : 0 ; padding : 0 ; border : 0 ;}. stickystuff-cloned { margin-top : 0 ; position : fixed; top : 0 ; z-index : 999 ;} $ ( "table" ) . ...

    Sample-jQuery-JSON-Table:用于在客户端管理表格数据的非常简单(但有限)的 jQuery 实现

    jQuery JSON Table 将 JSON 数据转化为这些 HTML 元素,从而在页面上显示表格。 4. **页面加载时的数据重构**: 描述中提到的一个待办事项是在页面加载时重构前置数据。这意味着在页面加载完成后,程序会自动处理预...

Global site tag (gtag.js) - Google Analytics