在做数据展示时,出阿里的数据好多,分页后,由于页面显示的范围比较小,数据太少有不太方便,这是就出现了 滚动条 ,可是在滚动条 滚动时 table 的第一列 标题 也就随着滚动没了,有时数据就不知道指的是那个了。
想想 excel 中可以 冻结表头 ,这样养 滚动时 ,表头 上的说明还是可以看见 ,比较人性化了,一同事实现了该功能 哪来 晒晒:
实现的核心 代码:
<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>
以上 代码就实现了 冻结标题 的功能,这里注意下 table 的id 和 div 的 id 就可以了!
全部页面:
下边是一个Jsp页面 代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <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: 140; overflow: auto;"> <table id=freezedivTable > <tr> <th nowrap="nowrap">序号</th> <th nowrap="nowrap">内容</th> </tr> <tr> <th nowrap="nowrap">序号</th> <th nowrap="nowrap">内容</th> </tr> <tr> <td>1</td> <td>内容</td> </tr> <tr> <td>2</td> <td>内容</td> </tr> <tr> <td>3</td> <td>内容</td> </tr> <tr> <td>4</td> <td>内容</td> </tr> <tr> <td>5</td> <td>内容</td> </tr> <tr> <td>6</td> <td>内容</td> </tr> <tr> <td>7</td> <td>内容</td> </tr> <tr> <td>8</td> <td>内容</td> </tr> <tr> <td>9</td> <td>内容</td> </tr> <tr> <td>10</td> <td>内容</td> </tr> <tr> <td>11</td> <td>内容</td> </tr> <tr> <td>12</td> <td>内容</td> </tr> <tr> <td>13</td> <td>内容</td> </tr> <tr> <td>14</td> <td>内容</td> </tr> <tr> <td>15</td> <td>内容</td> </tr> <tr> <td>16</td> <td>内容</td> </tr> <tr> <td>17</td> <td>内容</td> </tr> <tr> <td>18</td> <td>内容</td> </tr> <tr> <td>19</td> <td>内容</td> </tr> <tr> <td>20</td> <td>内容</td> </tr> </table> </div> </body> </html>