又有好久没写东西了,一直忙工作的事,最近又被一件事吸引住,也困惑住,就是表格滚动问题
要求是表格内容如果过多的话,表格要滚动,但只是表体内容动,而表头不动,效果要和Excel的一样,然后我在网上找了一些,要么觉得太烦,要么就根本达不到目的,最后又只得自己来写,今天终于算写好了,但还有一些小小的bug,而这些小bug一时半会我又解决不了,痛苦,先将就把这个能在普通情况下用得上的效果展示出来看一下吧
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="http://www.uideas.cn/download/tableopreat.js" language="javascript" type="text/javascript"></script> <style> p{ margin:0px; padding:0px;} td{ text-align:center;font-size:12px; line-height:24px;} tbstyle{ background:#CCCCCC; font-size:12px; line-height:24px;} </style> </head> <body onLoad="setTableOverflow()" onResize="setTableOverflow()" style="margin:0px; padding:0px; overflow:hidden"> <table width="100%" border="0" cellspacing="0" cellpadding="0"id="infot" > <tr> <td style="text-align:left;"><p>下面是一个可以固定表头,而表格内容可以滚动的表格</p> <p>并且根据浏览器大小或内容多少的改变,而动态改变滚动条! </p> <p> <input type="button" value="添加行" onClick="addRow()"> </p> </td> </tr> </table> <table height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033" id="tablehead" style="position:absolute; z-index:2000"> <tr> <td align="center" bgcolor="#00FF00">序号</td> <td align="center" bgcolor="#00FF00">姓名</td> <td align="center" bgcolor="#00FF00">年龄</td> <td align="center" bgcolor="#00FF00">操作</td> </tr> </table> <div style="position:absolute; width:100%; overflow:auto; z-index:1000" id="cov"> <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033"id="tablebody"> <tr> <td height="24" align="center" bgcolor="#00FF00">序号</td> <td align="center" bgcolor="#00FF00">姓名</td> <td align="center" bgcolor="#00FF00">年龄</td> <td align="center" bgcolor="#00FF00">操作</td> </tr> <tr> <td align="center" bgcolor="#CCCCCC">ID_0</td> <td align="center" bgcolor="#CCCCCC">NAME_0</td> <td align="center" bgcolor="#CCCCCC">AGE_0</td> <td align="center" bgcolor="#CCCCCC"><a onClick="delRow(this)">删除</a></td> </tr> </table> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[查看详情... ...]
