[转] js实现html table 行,列锁定

js实现html table 表头,指定列锁定

实现效果如下:

感兴趣的朋友可以直接复制出来运行看效果。

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>new document</title>
  5     <script type="text/javascript"
  6             src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  7
  8     <script type="text/javascript">
  9         function FixTable(TableID, FixColumnNumber, width, height) {
 10             /// <summary>
 11             ///     锁定表头和列
 12             ///     <para> sorex.cnblogs.com </para>
 13             /// </summary>
 14             /// <param name="TableID" type="String">
 15             ///     要锁定的Table的ID
 16             /// </param>
 17             /// <param name="FixColumnNumber" type="Number">
 18             ///     要锁定列的个数
 19             /// </param>
 20             /// <param name="width" type="Number">
 21             ///     显示的宽度
 22             /// </param>
 23             /// <param name="height" type="Number">
 24             ///     显示的高度
 25             /// </param>
 26             if ($("#" + TableID + "_tableLayout").length != 0) {
 27                 $("#" + TableID + "_tableLayout").before($("#" + TableID));
 28                 $("#" + TableID + "_tableLayout").empty();
 29             }
 30             else {
 31                 $("#" + TableID).after("<div id=‘" + TableID + "_tableLayout‘ style=‘overflow:hidden;height:" + height + "px; width:" + width + "px;‘></div>");
 32             }
 33             $(‘<div id="‘ + TableID + ‘_tableFix"></div>‘
 34             + ‘<div id="‘ + TableID + ‘_tableHead"></div>‘
 35             + ‘<div id="‘ + TableID + ‘_tableColumn"></div>‘
 36             + ‘<div id="‘ + TableID + ‘_tableData"></div>‘).appendTo("#" + TableID + "_tableLayout");
 37             var oldtable = $("#" + TableID);
 38             var tableFixClone = oldtable.clone(true);
 39             tableFixClone.attr("id", TableID + "_tableFixClone");
 40             $("#" + TableID + "_tableFix").append(tableFixClone);
 41             var tableHeadClone = oldtable.clone(true);
 42             tableHeadClone.attr("id", TableID + "_tableHeadClone");
 43             $("#" + TableID + "_tableHead").append(tableHeadClone);
 44             var tableColumnClone = oldtable.clone(true);
 45             tableColumnClone.attr("id", TableID + "_tableColumnClone");
 46             $("#" + TableID + "_tableColumn").append(tableColumnClone);
 47             $("#" + TableID + "_tableData").append(oldtable);
 48             $("#" + TableID + "_tableLayout table").each(function () {
 49                 $(this).css("margin", "0");
 50             });
 51             var HeadHeight = $("#" + TableID + "_tableHead thead").height();
 52             HeadHeight += 2;
 53             $("#" + TableID + "_tableHead").css("height", HeadHeight);
 54             $("#" + TableID + "_tableFix").css("height", HeadHeight);
 55             var ColumnsWidth = 0;
 56             var ColumnsNumber = 0;
 57             $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
 58                 ColumnsWidth += $(this).outerWidth(true);
 59                 ColumnsNumber++;
 60             });
 61             ColumnsWidth += 2;
 62             if ($.browser.msie) {
 63                 switch ($.browser.version) {
 64                     case "7.0":
 65                         if (ColumnsNumber >= 3) ColumnsWidth--;
 66                         break;
 67                     case "8.0":
 68                         if (ColumnsNumber >= 2) ColumnsWidth--;
 69                         break;
 70                 }
 71             }
 72             $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
 73             $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
 74             $("#" + TableID + "_tableData").scroll(function () {
 75                 $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
 76                 $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
 77             });
 78             $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
 79             $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
 80             $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
 81             $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
 82             if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
 83                 $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
 84                 $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
 85             }
 86             if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
 87                 $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
 88                 $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
 89             }
 90             $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
 91             $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
 92             $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
 93             $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
 94         }
 95 $(document).ready(function () {
 96             FixTable("MyTable", 1, 600, 400);
 97         });
 98     </script>
 99 </head>
100 <body>
101     <table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
102            id="MyTable" border="1" cellspacing="0" cellpadding="0">
103         <thead>
104             <tr>
105                 <th style="text-align: center; width: 80px" rowspan="3">姓名</th>
106                 <th style="text-align: center; width: 80px" rowspan="3">班级</th>
107                 <th style="text-align: center" colspan="10">成绩</th>
108             </tr>
109             <tr>
110                 <th style="text-align: center" colspan="3">主科</th>
111                 <th style="text-align: center" colspan="3">文科</th>
112                 <th style="text-align: center" colspan="3">理科</th>
113                 <th style="text-align: center; width: 80px" rowspan="2">总分</th>
114             </tr>
115             <tr>
116                 <th style="text-align: center; width: 80px">语文</th>
117                 <th style="text-align: center; width: 80px">数学</th>
118                 <th style="text-align: center; width: 80px">英语</th>
119                 <th style="text-align: center; width: 80px">政治</th>
120                 <th style="text-align: center; width: 80px">历史</th>
121                 <th style="text-align: center; width: 80px">地理</th>
122                 <th style="text-align: center; width: 80px">物理</th>
123                 <th style="text-align: center; width: 80px">化学</th>
124                 <th style="text-align: center; width: 80px">生物</th>
125             </tr>
126             <!--
127                  <tr>
128                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
129                                      姓名
130                                  </th>
131                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
132                                      班级
133                                  </th>
134                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
135                                      语文
136                                  </th>
137                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
138                                      数学
139                                  </th>
140                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
141                                      英语
142                                  </th>
143                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
144                                      政治
145                                  </th>
146                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
147                                      历史
148                                  </th>
149                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
150                                      地理
151                                  </th>
152                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
153                                      物理
154                                  </th>
155                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
156                                      化学
157                                  </th>
158                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
159                                      生物
160                                  </th>
161                                  <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
162                                      总分
163                                  </th>
164
165                  </tr>
166              -->
167         </thead>
168         <tbody>
169             <!-- 数据行 -->
170             <tr>
171                 <td>学生32</td>
172                 <td>班级1</td>
173                 <td>29</td>
174                 <td>25</td>
175                 <td>146</td>
176                 <td>28</td>
177                 <td>79</td>
178                 <td>73</td>
179                 <td>47</td>
180                 <td>8</td>
181                 <td>91</td>
182                 <td>526</td>
183             </tr>
184             <tr>
185                 <td>学生32</td>
186                 <td>班级1</td>
187                 <td>29</td>
188                 <td>25</td>
189                 <td>146</td>
190                 <td>28</td>
191                 <td>79</td>
192                 <td>73</td>
193                 <td>47</td>
194                 <td>8</td>
195                 <td>91</td>
196                 <td>526</td>
197             </tr>
198             <tr>
199                 <td>学生32</td>
200                 <td>班级1</td>
201                 <td>29</td>
202                 <td>25</td>
203                 <td>146</td>
204                 <td>28</td>
205                 <td>79</td>
206                 <td>73</td>
207                 <td>47</td>
208                 <td>8</td>
209                 <td>91</td>
210                 <td>526</td>
211             </tr>
212             <tr>
213                 <td>学生32</td>
214                 <td>班级1</td>
215                 <td>29</td>
216                 <td>25</td>
217                 <td>146</td>
218                 <td>28</td>
219                 <td>79</td>
220                 <td>73</td>
221                 <td>47</td>
222                 <td>8</td>
223                 <td>91</td>
224                 <td>526</td>
225             </tr>
226             <tr>
227                 <td>学生32</td>
228                 <td>班级1</td>
229                 <td>29</td>
230                 <td>25</td>
231                 <td>146</td>
232                 <td>28</td>
233                 <td>79</td>
234                 <td>73</td>
235                 <td>47</td>
236                 <td>8</td>
237                 <td>91</td>
238                 <td>526</td>
239             </tr>
240             <tr>
241                 <td>学生32</td>
242                 <td>班级1</td>
243                 <td>29</td>
244                 <td>25</td>
245                 <td>146</td>
246                 <td>28</td>
247                 <td>79</td>
248                 <td>73</td>
249                 <td>47</td>
250                 <td>8</td>
251                 <td>91</td>
252                 <td>526</td>
253             </tr>
254             <tr>
255                 <td>学生32</td>
256                 <td>班级1</td>
257                 <td>29</td>
258                 <td>25</td>
259                 <td>146</td>
260                 <td>28</td>
261                 <td>79</td>
262                 <td>73</td>
263                 <td>47</td>
264                 <td>8</td>
265                 <td>91</td>
266                 <td>526</td>
267             </tr>
268             <tr>
269                 <td>学生32</td>
270                 <td>班级1</td>
271                 <td>29</td>
272                 <td>25</td>
273                 <td>146</td>
274                 <td>28</td>
275                 <td>79</td>
276                 <td>73</td>
277                 <td>47</td>
278                 <td>8</td>
279                 <td>91</td>
280                 <td>526</td>
281             </tr>
282             <tr>
283                 <td>学生32</td>
284                 <td>班级1</td>
285                 <td>29</td>
286                 <td>25</td>
287                 <td>146</td>
288                 <td>28</td>
289                 <td>79</td>
290                 <td>73</td>
291                 <td>47</td>
292                 <td>8</td>
293                 <td>91</td>
294                 <td>526</td>
295             </tr>
296             <tr>
297                 <td>学生32</td>
298                 <td>班级1</td>
299                 <td>29</td>
300                 <td>25</td>
301                 <td>146</td>
302                 <td>28</td>
303                 <td>79</td>
304                 <td>73</td>
305                 <td>47</td>
306                 <td>8</td>
307                 <td>91</td>
308                 <td>526</td>
309             </tr>
310             <tr>
311                 <td>学生32</td>
312                 <td>班级1</td>
313                 <td>29</td>
314                 <td>25</td>
315                 <td>146</td>
316                 <td>28</td>
317                 <td>79</td>
318                 <td>73</td>
319                 <td>47</td>
320                 <td>8</td>
321                 <td>91</td>
322                 <td>526</td>
323             </tr>
324             <tr>
325                 <td>学生32</td>
326                 <td>班级1</td>
327                 <td>29</td>
328                 <td>25</td>
329                 <td>146</td>
330                 <td>28</td>
331                 <td>79</td>
332                 <td>73</td>
333                 <td>47</td>
334                 <td>8</td>
335                 <td>91</td>
336                 <td>526</td>
337             </tr>
338             <tr>
339                 <td>学生32</td>
340                 <td>班级1</td>
341                 <td>29</td>
342                 <td>25</td>
343                 <td>146</td>
344                 <td>28</td>
345                 <td>79</td>
346                 <td>73</td>
347                 <td>47</td>
348                 <td>8</td>
349                 <td>91</td>
350                 <td>526</td>
351             </tr>
352             <tr>
353                 <td>学生32</td>
354                 <td>班级1</td>
355                 <td>29</td>
356                 <td>25</td>
357                 <td>146</td>
358                 <td>28</td>
359                 <td>79</td>
360                 <td>73</td>
361                 <td>47</td>
362                 <td>8</td>
363                 <td>91</td>
364                 <td>526</td>
365             </tr>
366             <tr>
367                 <td>学生32</td>
368                 <td>班级1</td>
369                 <td>29</td>
370                 <td>25</td>
371                 <td>146</td>
372                 <td>28</td>
373                 <td>79</td>
374                 <td>73</td>
375                 <td>47</td>
376                 <td>8</td>
377                 <td>91</td>
378                 <td>526</td>
379             </tr>
380             <tr>
381                 <td>学生32</td>
382                 <td>班级1</td>
383                 <td>29</td>
384                 <td>25</td>
385                 <td>146</td>
386                 <td>28</td>
387                 <td>79</td>
388                 <td>73</td>
389                 <td>47</td>
390                 <td>8</td>
391                 <td>91</td>
392                 <td>526</td>
393             </tr>
394         </tbody>
395     </table>
396 </body>
397 </html>

时间: 2024-10-25 12:27:55

[转] js实现html table 行,列锁定的相关文章

table行转列

table行转列 摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适,另外又要保持原邮件的格式.这个确实很难统一.目前是使用iframe标签,将原邮件的html在iframe中展示.但问题又来了,如果邮寄中有大表格,大图片,如何保持邮件内容自适应? 思考 通常的做法是在head中添加meta标签 <meta name="viewport&quo

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr:odd td").css("background-color", color); //改变偶数行背景色 $("#GvList tr:odd").attr("bg", color); $("#GvList tr:even"

利用js制作html table分页示例(js实现分页)

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var direct=0; //方向 var len; //总行数 var page; //总页数 var begin; var end; $(docume

Table行合并操作

此方法不可取,但几天心血 保留,已有新想法,稍后会出一个完善的Table行列合并方法 <!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"> <

Angular JS将数据显示为两列(html)

(数据为Array数组)使用AngularJS中ng-show="{{}}",其将数据按行分为奇数行和偶数行,$even是判断是否为奇数行[如果是则为true,不是则为false],$odd判断是否为偶数行,ng-show="{{$even/$odd}}".根据读取数据的需要对需要隐藏的数据进行隐藏和显示. 在写js将数据分为两列时使用for循环取数据进行判断. 1 var oL = document.getElementById('L'); 2 var oR =

asp.net实现动态添加table行

asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="releaseAffair.aspx.cs" Inherits="affair_releaseAffair" %> <!DOCTYPE html> <!--发布事务页面:名称Affa

jquery 删除table行,该如何解决

query 删除table行< table >  < tbody >  < tr >  < td > 这行原来就有 </ td >  < td >< button class = " del " > 删除 </ button ></ td >  </ tr >  < tr >  < td > 这行原来就有 </ td >  <

table行随鼠标变色

table行随鼠标变色 1.设计表格 <body class="html_body"> <div class="body_div"> <table id="tab"> <tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> <th>工号</th> <th>姓名&l