2008-06-26
利用Jquery实现表头固定
最近在网上看到一段十分精简的实现表头固定的脚本，刚好项目中需要，于是利用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>
- 19:12
- 浏览 (147)
- 评论 (0)
- 分类: javascript
- 相关推荐
发表评论
jokeymzx
- 浏览: 1960 次
- 性别:
- 来自: 北京
- 详细资料
搜索本博客
最新评论
-
Java中用类名做变量名
编译器 应该提示错误吧
-- by sandybuster -
利用js模拟HashMap
var jsMap={ Map:{}, set:function (key, ...
-- by dangzhao -
Java中用类名做变量名
你再反编译一下看看，就知道编译器干啥了，呵呵
-- by xiaoych -
Java中用类名做变量名
你不要自己迷惑自己.按照代码规范写代码
-- by hgq0011 -
Java中用类名做变量名
编译器不应该管这种编码规范的事情。事实上，你用Eclipse编写这段代码，它就会 ...
-- by Lucas Lee
评论排行榜