<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>散人笔记 &#187; Excel</title>
	<atom:link href="http://www.uideas.cn/post/tag/excel/feed" rel="self" type="application/rss+xml" />
	<link>http://www.uideas.cn</link>
	<description>生活来源于创意,所以我懂生活</description>
	<lastBuildDate>Sun, 22 Aug 2010 07:17:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>js实现表格添加,删除行,并且表头固定的表格滚动</title>
		<link>http://www.uideas.cn/post/195.html</link>
		<comments>http://www.uideas.cn/post/195.html#comments</comments>
		<pubDate>Mon, 07 Dec 2009 14:22:17 +0000</pubDate>
		<dc:creator>kos</dc:creator>
				<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[Excel]]></category>
		<category><![CDATA[行删除]]></category>
		<category><![CDATA[行添加]]></category>
		<category><![CDATA[表头固定]]></category>
		<category><![CDATA[表格滚动]]></category>

		<guid isPermaLink="false">http://www.uideas.cn/?p=195</guid>
		<description><![CDATA[　　又有好久没写东西了,一直忙工作的事,最近又被一件事吸引住,也困惑住,就是表格滚动问题。要求是表格内容如果过多的话,表格要滚动,但只是表体内容动,而表头不动,效果要和Excel的一样,然后我在网上找了一些,要么觉得太烦,要么就根本达不到目的,最后又只得自己来写,今天终于算写好了……]]></description>
			<content:encoded><![CDATA[<p>　　又有好久没写东西了,一直忙工作的事,最近又被一件事吸引住,也困惑住,就是表格滚动问题。要求是表格内容如果过多的话,表格要滚动,但只是表体内容动,而表头不动,效果要和Excel的一样,然后我在网上找了一些,要么觉得太烦,要么就根本达不到目的,最后又只得自己来写,今天终于算写好了,但还有一些小小的bug,而这些小bug一时半会我又解决不了,痛苦,先将就把这个能在普通情况下用得上的效果展示出来看一下吧</p>
<form enctype="application/x-www-form-urlencoded" method="get"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" cols="20" rows="8">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script src="http://www.uideas.cn/download/tableopreat.js" language="javascript" type="text/javascript"&gt;&lt;/script&gt; &lt;style&gt; p{ margin:0px; padding:0px;} td{ text-align:center;font-size:12px; line-height:24px;} tbstyle{ background:#CCCCCC; font-size:12px; line-height:24px;} &lt;/style&gt; &lt;/head&gt;  &lt;body onLoad="setTableOverflow()" onResize="setTableOverflow()" style="margin:0px; padding:0px; overflow:hidden"&gt; &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"id="infot" &gt;   &lt;tr&gt;     &lt;td style="text-align:left;"&gt;&lt;p&gt;下面是一个可以固定表头,而表格内容可以滚动的表格&lt;/p&gt;   &lt;p&gt;并且根据浏览器大小或内容多少的改变,而动态改变滚动条! &lt;/p&gt;   &lt;p&gt;     &lt;input type="button" value="添加行" onClick="addRow()"&gt;   &lt;/p&gt;   &lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;table height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033" id="tablehead" style="position:absolute; z-index:2000"&gt;   &lt;tr&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;序号&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;姓名&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;年龄&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;操作&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;div style="position:absolute; width:100%; overflow:auto; z-index:1000" id="cov"&gt; &lt;table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033"id="tablebody"&gt;   &lt;tr&gt;     &lt;td height="24" align="center" bgcolor="#00FF00"&gt;序号&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;姓名&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;年龄&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;操作&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;ID_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;NAME_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;AGE_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;&lt;a onClick="delRow(this)"&gt;删除&lt;/a&gt;&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span>
</div>
</div>
<p></code></form>
<p>　　实现这样的效果我的思路是用两个表格,第一个表格用着表头,这样两个独立的表格可以单独拿来做处理,比如只对第二个表格作滚动效果,而第二个表格也有表头,只是看不到而已,其实样式里面是可见的,只是位置变了而已,并且第二个表格的表头和第一个表格那一行一样,原因是以防挤压问题出现;在这之后,要对两个表格的每一列作处理,当然一般情况下,内容休表格的内容是不规整的,所以让表头来适应表体是个很好的选择,而这里只需要他去适应表体的第一行每一列就行了,因为下面的表格是一体的,就这样一个滚动的功能就出来了,为了加强效果展示,我对表格做了一个行添加效果,这个功能相信很多人都会写,就不做介绍了,不会的话可以把里面的<a href="http://www.uideas.cn/download/tableopreat.js" target="_blank"> js </a>打开看看就明白了,提醒,你可以把浏览器窗口化,并且拉伸窗口看看效果,也许这个就是你想要的,目前已兼容几个主流浏览器,若朋友们发现有什么问题,请留言交流一下,把这个功能做完善!<br />
　　郁闷，真是笨，其实还有一点点小bug,这个想了半天，开始不知道为啥，最后发觉body的onResize()事件，是当浏览器窗口大小改变的时候就执行，不是在完成以后，所以当你窗口大小改变了时，js能获取的仍然是窗口改变前的值，但这个里面就要用到这个相关的取值问题，解决办法是，当窗口改变后，缓一点时间，然后再去获值，这样就不出问题了，很短的时间，短得基本上看不出破绽，问题就这样将就解决了<br />
看下面的代码:</p>
<form enctype="application/x-www-form-urlencoded" method="get"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" cols="20" rows="8">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script src="http://www.uideas.cn/download/tableopreat.js" language="javascript" type="text/javascript"&gt;&lt;/script&gt; &lt;style&gt; p{ margin:0px; padding:0px;} td{ text-align:center;font-size:12px; line-height:24px;} tbstyle{ background:#CCCCCC; font-size:12px; line-height:24px;} &lt;/style&gt; &lt;script&gt;function Resize(){setTimeout(setTableOverflow,1)}&lt;/script&gt;&lt;/head&gt;  &lt;body onLoad="Resize()" onResize="Resize()" style="margin:0px; padding:0px; overflow:hidden"&gt; &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"id="infot" &gt;   &lt;tr&gt;     &lt;td style="text-align:left;"&gt;&lt;p&gt;下面是一个可以固定表头,而表格内容可以滚动的表格&lt;/p&gt;   &lt;p&gt;并且根据浏览器大小或内容多少的改变,而动态改变滚动条! &lt;/p&gt;   &lt;p&gt;     &lt;input type="button" value="添加行" onClick="addRow()"&gt;   &lt;/p&gt;   &lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;table height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033" id="tablehead" style="position:absolute; z-index:2000"&gt;   &lt;tr&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;序号&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;姓名&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;年龄&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;操作&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;div style="position:absolute; width:100%; overflow:auto; z-index:1000" id="cov"&gt; &lt;table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#990033"id="tablebody"&gt;   &lt;tr&gt;     &lt;td height="24" align="center" bgcolor="#00FF00"&gt;序号&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;姓名&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;年龄&lt;/td&gt;     &lt;td align="center" bgcolor="#00FF00"&gt;操作&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;ID_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;NAME_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;AGE_0&lt;/td&gt;     &lt;td align="center" bgcolor="#CCCCCC"&gt;&lt;a onClick="delRow(this)"&gt;删除&lt;/a&gt;&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span>
</div>
</div>
<p></code></form>
<p>&nbsp;</p>
<p><strong><span style="color: #993300;">相关下载：</span></strong><br />
　　js下载地址：<a href="http://www.uideas.cn/download/tableopreat.js">tableopreat.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uideas.cn/post/195.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
