友意博客 – 行添加

发布者：kos 发布日期：2009年12月7日 10:22 pm 共有4条评论

又有好久没写东西了,一直忙工作的事,最近又被一件事吸引住,也困惑住,就是表格滚动问题

要求是表格内容如果过多的话,表格要滚动,但只是表体内容动,而表头不动,效果要和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 全部选择 提示：你可先修改部分代码，再按运行]

[查看详情... ...]

来自分类： JavaScript, 网站设计 Tags： Excel, 行删除, 行添加, 表头固定, 表格滚动

一	二	三	四	五	六	日
		2010-03月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

站点日历

站内搜索

分类导航

有情链接

站点日历

站内搜索

分类导航

博客标签

有情链接