[转] 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>
View Code

 

转载于:https://www.cnblogs.com/-------perfect/p/4469666.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SQLAlchemy 是一个 SQL 工具包和对象关系映射(ORM)库,用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具,允许开发者以 Python 类和对象的形式操作数据库,而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上,支持多种数据库后端,如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能: 对象关系映射(ORM): SQLAlchemy 允许开发者使用 Python 类来表示数据库表,使用类的实例表示表中的。 开发者可以定义类之间的关系(如一对多、多对多),SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM,开发者可以像操作 Python 对象一样操作数据库,这大大简化了数据库操作的复杂性。 表达式语言: SQLAlchemy 提供了一个丰富的 SQL 表达式语言,允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制,同时保持了代码的可读性和可维护性。 数据库引擎和连接池: SQLAlchemy 支持多种数据库后端,并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能,以优化数据库连接的创建、使用和释放。 会话管理: SQLAlchemy 使用会话(Session)来管理对象的持久化状态。 会话提供了一个工作单元(unit of work)和身份映射(identity map)的概念,使得对象的状态管理和查询更加高效。 事件系统: SQLAlchemy 提供了一个事件系统,允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执额外的逻辑。
SQLAlchemy 是一个 SQL 工具包和对象关系映射(ORM)库,用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具,允许开发者以 Python 类和对象的形式操作数据库,而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上,支持多种数据库后端,如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能: 对象关系映射(ORM): SQLAlchemy 允许开发者使用 Python 类来表示数据库表,使用类的实例表示表中的。 开发者可以定义类之间的关系(如一对多、多对多),SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM,开发者可以像操作 Python 对象一样操作数据库,这大大简化了数据库操作的复杂性。 表达式语言: SQLAlchemy 提供了一个丰富的 SQL 表达式语言,允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制,同时保持了代码的可读性和可维护性。 数据库引擎和连接池: SQLAlchemy 支持多种数据库后端,并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能,以优化数据库连接的创建、使用和释放。 会话管理: SQLAlchemy 使用会话(Session)来管理对象的持久化状态。 会话提供了一个工作单元(unit of work)和身份映射(identity map)的概念,使得对象的状态管理和查询更加高效。 事件系统: SQLAlchemy 提供了一个事件系统,允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执额外的逻辑。
GeoPandas是一个开源的Python库,旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力,为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍: 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库,用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构,允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame:GeoPandas的核心数据结构,是Pandas DataFrame的扩展。它包含一个或多个,其中至少一是几何(geometry column),用于存储地理空间几何图形(如点、线、多边形等)。 GeoSeries:GeoPandas中的另一个重要数据结构,类似于Pandas的Series,但用于存储几何图形序。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式,包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据,并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形,包括点、线、多边形等。它提供了丰富的空间操作函数,如缓冲区分析、交集、并集、差集等,使得用户可以方便地进地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能,可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作,可以将两个GeoDataFrame按照空间关系(如相交、包含等)进连接。此外,它还支持空间索引,可以提高地理空间数据查询的效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值