最近在网上看到一段十分精简的实现表头固定的脚本，刚好项目中需要，于是利用Jquery进行重写和简单的封装， 基本可以在不改动现有表格的基础上实现表头固定，而且可以支持在同一个页面有多个table。
1. <html>
2.
3. <head>
4.
5. <script src="jquery.js" type="text/javascript"></script>
6.
7.
8.
9. <style type="text/css">
10.
11. .tableDiv{
12.
13. overflow-x:hidden;
14.
15. BORDER-RIGHT: 1px solid;
16.
17. BORDER-TOP: 1px solid;
18.
19. BORDER-BOTTOM: 1px solid;
20.
21. BORDER-LEFT: 1px solid;
22.
23. }
24.
25.
26.
27. .theadDiv{
28.
29. position:relative;
30.
31. white-space:nowrap
32.
33. }
34.
35.
36.
37. .contentDiv{
38.
39. overflow-x:scroll;
40.
41. overflow-y:scroll
42.
43. }
44.
45. .theadTd {
46.
47. BORDER-RIGHT: 1px solid;
48.
49. BORDER-TOP: 1px solid;
50.
51. BORDER-BOTTOM: 1px solid;
52.
53. BORDER-LEFT: 1px solid;
54.
55. padding-top:5px;
56.
57. padding-left: 4px;
58.
59. padding-right: 4px;
60.
61. HEIGHT: 25px;
62.
63. overflow:hidden;
64.
65. WHITE-SPACE: nowrap
66.
67. }
68.
69.
70.
71. </style>
72.
73. </head>
74.
75.
76.
77. <script type="text/javascript">
78.
79.
80.
81.
82.
83. function setScrollGrid(tableID,twidth,theight){
84.
85.
86.
87.
88.
89. var jqTable = $("#"+tableID);
90.
91. var tableDivID = tableID+"_div";
92.
93. var theadDivID = tableID+"_thead";
94.
95. var contentDivID = tableID+"_content";
96.
97.
98.
99. var tableDiv = document.createElement("DIV");
100.
101. var theadDiv = document.createElement("DIV");
102.
103. var contentDiv = document.createElement("DIV");
104.
105.
106.
107. var jqTableDiv = $(tableDiv);
108.
109. var jqTheadDiv = $(theadDiv);
110.
111. var jqContentDiv = $(contentDiv);
112.
113.
114.
115. jqTableDiv.addClass("tableDiv");
116.
117. jqTheadDiv.addClass("theadDiv");
118.
119. jqContentDiv.addClass("contentDiv");
120.
121. jqContentDiv.get(0).onscroll = function(){ jqTheadDiv.get(0).style.posLeft=-jqContentDiv.get(0).scrollLeft;}
122.
123.
124.
125. $(tableDiv).append(theadDiv);
126.
127. $(tableDiv).append(contentDiv);
128.
129.
130.
131. jqTable.before($(tableDiv));
132.
133. $(contentDiv).append(jqTable);
134.
135.
136.
137. jqTableDiv.width(twidth);
138.
139. jqContentDiv.width(twidth);
140.
141. jqContentDiv.height(theight);
142.
143.
144.
145. var jqTheadTds = jqTable.find("thead > tr >td");
146.
147.
148.
149. var newTitle = "";
150.
151. for(var i=0;i < $(jqTheadTds).size();i++){
152.
153.
154.
155. var tempTd = $(jqTheadTds).get(i);
156.
157. newTitle += "<span class='theadTd' style='width:"+(tempTd.clientWidth+4)+"px'>"+tempTd.innerText+"</span>"
158.
159. }
160.
161.
162.
163. jqTheadDiv.html(newTitle);
164.
165.
166.
167. jqTable.find("thead").remove();
168.
169.
170.
171. }
172.
173.
174.
175.
176.
177. function init(){
178.
179.
180.
181. setScrollGrid("testTable",500,200);
182.
183. }
184.
185.
186.
187. </script>
188.
189.
190.
191.
192.
193. <body onload="init();">
194.
195.
196.
197. <table id="testTable" >
198.
199. <thead>
200.
201. <tr>
202.
203. <td align="center" nowrap width="100">标题1</td>
204.
205. <td align="center" nowrap width="100">标题2</td>
206.
207. <td align="center" nowrap width="100">标题3</td>
208.
209. <td align="center" nowrap width="100">标题4</td>
210.
211. <td align="center" nowrap width="100">标题5</td>
212.
213. <td align="center" nowrap width="100">标题6</td>
214.
215. </tr>
216.
217. </thead>
218.
219. <tr>
220.
221. <td align="center" nowrap width="100">date11</td>
222.
223. <td align="center" nowrap width="100">date12</td>
224.
225. <td align="center" nowrap width="100">date13</td>
226.
227. <td align="center" nowrap width="100">date14</td>
228.
229. <td align="center" nowrap width="100">date15</td>
230.
231. <td align="center" nowrap width="100">date16</td>
232.
233. </tr>
234.
235. <tr>
236.
237. <td align="center" nowrap width="100">date21</td>
238.
239. <td align="center" nowrap width="100">date22</td>
240.
241. <td align="center" nowrap width="100">date23</td>
242.
243. <td align="center" nowrap width="100">date24</td>
244.
245. <td align="center" nowrap width="100">date25</td>
246.
247. <td align="center" nowrap width="100">date26</td>
248.
249. </tr>
250.
251. <tr>
252.
253. <td align="center" nowrap width="100">date31</td>
254.
255. <td align="center" nowrap width="100">date32</td>
256.
257. <td align="center" nowrap width="100">date33</td>
258.
259. <td align="center" nowrap width="100">date34</td>
260.
261. <td align="center" nowrap width="100">date35</td>
262.
263. <td align="center" nowrap width="100">date36</td>
264.
265. </tr>
266.
267.
268.
269. </body>
分享到：
相关推荐
本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先，我们需要在HTML中构建基本的表格结构。表头`<thead>`通常包含表的列名，而表体`<tbody>`则包含实际的数据行。例如： ```html ...
近日做后台界面时，整理固定表头三种方法”揭示了文档要讨论的内容是如何在使用jQuery的情况下实现表格（Table）的表头固定效果。表头固定是常见的网页设计需求之一，特别是对于数据量较大的表格，固定表头可以让...
为了解决这个问题，我们可以利用jQuery来实现表头和列的固定效果，使用户在滚动时始终能看到列标题。本教程将详细讲解如何使用jQuery、JavaScript和HTML实现这一功能。 1. **HTML结构**： 首先，我们需要创建一个...
本文将深入探讨如何利用jQuery实现这一功能。 首先，理解jQuery冻结表头的基本原理。通常，我们会创建一个固定在顶部的表头元素，即使在用户滚动页面时也始终保持可见。这可以通过监听窗口的滚动事件，然后调整表头...
jQuery 提供了一个简单的方式来实现这种“表头固定效果”。下面将详细介绍如何使用 jQuery 实现这个功能。 首先，我们需要创建一个 JavaScript 文件，例如 `jQuery_FixedTableHead.js`，并在其中编写实现表头固定的...
一种常用的插件是`fixedHeader.table`，它可以轻松地将任何HTML表格的表头固定在视口顶部，无论表格内容如何滚动。 接着，固定表列的概念类似，但主要应用于水平方向。在某些场景下，可能希望某一列始终保持在左侧...
本文将详细探讨jQuery实现表头固定的三种方法，基于提供的压缩包文件中的三个示例：Execl-table-grid、jfixed和jquer。 首先，我们来看第一个示例，Execl-table-grid。这是一个模仿Excel样式的表格插件，它不仅支持...
1. **固定表头（Fixed Header）**：表头固定的关键在于将 `thead` 元素从 `tbody` 中分离出来，并将其设置为绝对定位。当表格容器（通常是一个 `div`）滚动时，表头始终保持在视口顶部。可以使用以下代码实现： ```...
标题 "jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面" 涉及的是在网页开发中使用jQuery EasyUI库实现的功能。jQuery EasyUI是一个基于jQuery的UI框架，它提供了一系列易于使用的组件，如datagrid（数据网格...
本文将深入探讨“实现固定表头和可排序的jQuery表格插件”——StickySort。 StickySort是一款专为jQuery设计的插件，它的主要功能在于解决网页中大型数据表格的问题。在网页滚动时，该插件能够保持表格的表头始终...
4. **Bootstrap或现代前端框架**：如果项目使用了Bootstrap或其他前端框架，这些框架可能已经提供了内置的表头固定解决方案，可以直接利用。 无论采用哪种方法，都需要考虑以下关键点： - **响应式设计**：确保在...
这个"jQuery仿excel固定表头和首列的表格.zip"压缩包提供了一个解决方案，利用jQuery实现这样的效果。下面我们将深入探讨这个话题，了解如何使用jQuery来创建一个具有固定表头和首列的表格。 首先，jQuery是一个轻...
为了解决这个问题，我们可以利用jQuery库来实现一个功能：固定表头标题栏，即使在滚动过程中也能保持可见。这个主题正是“jQuery实现固定表头标题栏让表格数据在滚动栏里滚动”的核心所在。 jQuery是一个轻量级、高...
然而，滚动过程中保持表头固定可以提高用户体验，让用户更容易理解数据的对应关系。`jQuery`是一个广泛使用的JavaScript库，它提供了一系列方便的函数来处理这种需求。在本案例中，"jquery固定表头出现4个导航条...
然而，当GridView中的数据过多时，为了保持页面的清晰度，通常需要实现表头固定而表身可滚动的效果。"ASP.NET GridView 表头固定 表身可以滚动"这个主题正是针对这一需求的解决方案。 首先，我们要理解实现表头固定...
在这里，我们将深入探讨如何利用jQuery来创建一个具有固定表头的滚动表格。 首先，理解固定表头的基本原理：当表格内容过多导致需要滚动查看时，表头应始终保持可见，以便用户在浏览数据时能够清晰地看到列名。实现...
在实现表头固定时，通常将表头部分通过CSS样式设置为`position: fixed`，并设定适当的宽度和高度，使其在页面滚动时始终保持在屏幕顶部。 针对“多表头”，这通常涉及到嵌套的`<thead>`元素。例如，一级表头在最...
3. **jQuery处理**：利用jQuery的`$(window).scroll()`函数监听滚动事件。在滚动事件的回调函数中，计算当前的滚动位置，然后更新表头和左侧列的位置。这可能涉及到对元素的`top`和`left`属性的调整。 4. **兼容性...
为了解决这一问题，我们可以利用jQuery库来实现表格的固定行列功能，让表头始终保持可见，即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先，确保在项目中引入jQuery库，可以使用CDN链接...