Table 冻结表头,大家对此应该不会很陌生,实现很简单,下面为大家详细介绍下具体的实现,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Table 冻结表头:
- <script type="text/javascript">
- function fixupFirstRow(tab) {
- var div=tab.parentNode;
- if(div.className.toLowerCase()=="freezediv"){
- tab.rows[0].style.zIndex="1";
- tab.rows[0].style.position="relative";
- div.onscroll = function(){
- var tr = tab.rows[0];
- tr.style.top = this.scrollTop-(this.scrollTop==0?1:2);
- tr.style.left=-1;
- }
- }
- }
- window.onload = function(){
- var tab=document.getElementById("freezedivTable");
- if(tab){
- fixupFirstRow(tab);
- }
- }
- </script>
html 源码:
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <script type="text/javascript">
- function fixupFirstRow(tab) {
- var div = tab.parentNode;
- if (div.className.toLowerCase() == "freezediv") {
- tab.rows[0].style.zIndex = "1";
- tab.rows[0].style.position = "relative";
- div.onscroll = function() {
- var tr = tab.rows[0];
- tr.style.top = this.scrollTop - (this.scrollTop == 0 ? 1 : 2);
- tr.style.left = -1;
- }
- }
- }
- window.onload = function() {
- var tab = document.getElementById("freezedivTable");
- if (tab) {
- fixupFirstRow(tab);
- }
- }
- </script>
- </head>
- <body>
- <div class="freezediv" style="width:100%;height:100px;overflow:auto;">
- <table id="freezedivTable" style="width:100%;" border="1">
- <tr bgcolor="white">
- <th width="25%">
- 序号
- </th>
- <th width="25%">
- 内容
- </th>
- <th width="25%">
- 序号
- </th>
- <th width="25%">
- 内容
- </th>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 内容
- </td>
- <td>
- 11
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- 内容
- </td>
- <td>
- 22
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- 内容
- </td>
- <td>
- 33
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- 内容
- </td>
- <td>
- 44
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 5
- </td>
- <td>
- 内容
- </td>
- <td>
- 55
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 6
- </td>
- <td>
- 内容
- </td>
- <td>
- 66
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 7
- </td>
- <td>
- 内容
- </td>
- <td>
- 77
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 8
- </td>
- <td>
- 内容
- </td>
- <td>
- 88
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 9
- </td>
- <td>
- 内容
- </td>
- <td>
- 99
- </td>
- <td>
- 内容
- </td>
- </tr>
- <tr>
- <td>
- 10
- </td>
- <td>
- 内容
- </td>
- <td>
- 1010
- </td>
- <td>
- 内容
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
来源: