表单验证的相关事件和辅助特效

最新推荐文章于 2023-07-13 20:24:01 发布

旭日初扬

最新推荐文章于 2023-07-13 20:24:01 发布

阅读量447

点赞数 1

分类专栏： Java

Java 专栏收录该内容

129 篇文章 5 订阅

订阅专栏

一、event对象包含的信息

<HTML><HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT language="javascript">
function cancelLink() 
{
if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 
 window.event.returnValue = false;
 }
</SCRIPT>
<BODY onclick="cancelLink()" onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y" >
<A href="www.sohu.com">sohu链接</A>

二、event对象－鼠标位置

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("客户区坐标：X coords: " + x + ", Y coords: " + y)
x=event.screenX
y=event.screenY
alert("屏幕坐标：X=" + x + " Y=" + y)
}
</script>
</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p>

</body>
</html>

三、防源代码拷贝

 
<SCRIPT language=javascript>  
function click() {  
if (event.button==2) {  
  alert('对不起,禁止你拷贝哦^_^.')  
}  
}  
document.onmousedown=click  
  
</SCRIPT>  
<BODY oncontextmenu="window.event.returnValue=false" onselectstart="return false" oncopy="return false;" oncut="return false;" >

<p>1. oncontextmenu=&quot;window.event.returnValue=false&quot; 将彻底屏蔽鼠标右键<br />
  &lt;table border oncontextmenu=return(false)&gt;&lt;td&gt;no&lt;/table&gt; 可用于Table<br />
  2. &lt;body onselectstart=&quot;return false&quot;&gt; 取消选取、防止复制<br />
  3. onpaste=&quot;return false&quot; 不准粘贴<br />
  4. oncopy=&quot;return false;&quot; oncut=&quot;return false;&quot; 防止复制<br />
  5. &lt;link rel=&quot;Shortcut Icon&quot; href=&quot;favicon.ico&quot;&gt; IE地址栏前换成自己的图标<br />
  6. &lt;link rel=&quot;Bookmark&quot; href=&quot;favicon.ico&quot;&gt; 可以在收藏夹中显示出你的图标</p>
<p>7. &lt;input style=&quot;ime-mode:disabled&quot;&gt; 关闭输入法</p>
<p>8. 永远都会带着框架<br />
  &lt;script language=&quot;JavaScript&quot;&gt;&lt;!--<br />
  if (window == top)top.location.href = &quot;frames.htm&quot;; //frames.htm为框架网页<br />
  // --&gt;&lt;/script&gt;</p>
<p>9. 防止被人frame<br />
  &lt;SCRIPT LANGUAGE=JAVASCRIPT&gt;&lt;!--<br />
  if (top.location != self.location)top.location=self.location;<br />
  // --&gt;&lt;/SCRIPT&gt;</p>
<p>10. 网页将不能被另存为<br />
  &lt;noscript&gt;&lt;*** src=&quot;/*.html&gt;&quot;;&lt;/***&gt;&lt;/noscript&gt; </p>
<p>11. &lt;input type=button value=&quot;/查看网页源代码<br />
  onclick=&quot;window.location = &quot;view-source:&quot;+ &quot;http://www.pconline.com.cn&quot;&quot;&gt;<br />
  12.删除时确认<br />
  &lt;a href=&quot;&quot;javascript :if(confirm(&quot;确实要删除吗?&quot;))location=&quot;boos.asp?&amp;areyou=删除&amp;page=1&quot;&quot;&gt;删除&lt;/a&gt; </p>
<p>13. 取得控件的绝对位置<br />
  //Javascript<br />
  &lt;script language=&quot;Javascript&quot;&gt;<br />
  function getIE(e){<br />
  var t=e.offsetTop;<br />
  var l=e.offsetLeft;<br />
  while(e=e.offsetParent){<br />
  t+=e.offsetTop;<br />
  l+=e.offsetLeft;<br />
  }<br />
  alert(&quot;top=&quot;+t+&quot;/nleft=&quot;+l);<br />
  }<br />
  &lt;/script&gt;<br />
  //VBScript<br />
  &lt;script language=&quot;VBScript&quot;&gt;&lt;!--<br />
  function getIE()<br />
  dim t,l,a,b<br />
  set a=document.all.img1<br />
  t=document.all.img1.offsetTop<br />
  l=document.all.img1.offsetLeft<br />
  while a.tagName&lt;&gt;&quot;BODY&quot;<br />
  set a = a.offsetParent<br />
  t=t+a.offsetTop<br />
  l=l+a.offsetLeft<br />
  wend<br />
  msgbox &quot;top=&quot;&amp;t&amp;chr(13)&amp;&quot;left=&quot;&amp;l,64,&quot;得到控件的位置&quot;<br />
  end function<br />
  --&gt;&lt;/script&gt;</p>
<p>14. 光标是停在文本框文字的最后<br />
  &lt;script language=&quot;javascript&quot;&gt;<br />
  function cc()<br />
  {<br />
  var e = event.srcElement;<br />
  var r =e.createTextRange();<br />
  r.moveStart(&quot;character&quot;,e.value.length);<br />
  r.collapse(true);<br />
  r.select();<br />
  }<br />
  &lt;/script&gt;<br />
  &lt;input type=text name=text1 value=&quot;123&quot; onfocus=&quot;cc()&quot;&gt;</p>
<p>15. 判断上一页的来源<br />
  javascript :<br />
  document.referrer</p>
<p>16. 最小化、最大化、关闭窗口<br />
  &lt;object id=hh1 classid=&quot;clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11&quot;&gt;<br />
  &lt;param name=&quot;Command&quot; value=&quot;Minimize&quot;&gt;&lt;/object&gt; &lt;object id=hh2 classid=&quot;clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11&quot;&gt;<br />
  &lt;param name=&quot;Command&quot; value=&quot;Maximize&quot;&gt;&lt;/object&gt; &lt;OBJECT id=hh3 classid=&quot;clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11&quot;&gt;<br />
  &lt;PARAM NAME=&quot;Command&quot; value=&quot;/Close&quot;&gt;&lt;/OBJECT&gt; &lt;input type=button value=&quot;/最小化 onclick=hh1.Click()&gt; &lt;input type=button value=&quot;/blog/最大化 onclick=hh2.Click()&gt; &lt;input type=button value=关闭 onclick=hh3.Click()&gt;<br />
  本例适用于IE</p>
<p>17.屏蔽功能键Shift,Alt,Ctrl<br />
  &lt;script&gt;<br />
  function look(){<br />
  if(event.shiftKey)<br />
  alert(&quot;禁止按Shift键!&quot;); //可以换成ALT　CTRL<br />
  }<br />
  document.onkeydown=look;<br />
  &lt;/script&gt;</p>
<p>18. 网页不会被缓存<br />
  &lt;META HTTP-EQUIV=&quot;pragma&quot; CONTENT=&quot;no-cache&quot;&gt; &lt;META HTTP-EQUIV=&quot;Cache-Control&quot; CONTENT=&quot;no-cache, must-revalidate&quot;&gt; &lt;META HTTP-EQUIV=&quot;expires&quot; CONTENT=&quot;Wed, 26 Feb 1997 08:21:57 GMT&quot;&gt;<br />
  或者&lt;META HTTP-EQUIV=&quot;expires&quot; CONTENT=&quot;0&quot;&gt;</p>
<p>19.怎样让表单没有凹凸感？<br />
  &lt;input type=text style=&quot;&quot;&quot;border:1 solid #000000&quot;&gt;<br />
  或<br />
  &lt;input type=text style=&quot;border-left:none; border-right:none; border-top:none; border-bottom: <br />
  1 solid #000000&quot;&gt;&lt;/textarea&gt;</p>
<p>20.&lt;div&gt;&lt;span&gt;&amp;&lt;layer&gt;的区别？<br />
  &lt;div&gt;(division)用来定义大段的页面元素，会产生转行<br />
  &lt;span&gt;用来定义同一行内的元素，跟&lt;div&gt;的唯一区别是不产生转行<br />
  &lt;layer&gt;是ns的标记，ie不支持，相当于&lt;div&gt;</p>
<p>21.让弹出窗口总是在最上面:<br />
  &lt;body onblur=&quot;this.focus();&quot;&gt;</p>
<p>22.不要滚动条? <br />
  让竖条没有: <br />
  &lt;body style=&quot;overflow:scroll;overflow-y:hidden&quot;&gt;<br />
  &lt;/body&gt;<br />
  让横条没有: <br />
  &lt;body style=&quot;overflow:scroll;overflow-x:hidden&quot;&gt;<br />
  &lt;/body&gt;<br />
  两个都去掉？更简单了<br />
  &lt;body scroll=&quot;no&quot;&gt;<br />
  &lt;/body&gt; </p>
<p>23.怎样去掉图片链接点击后，图片周围的虚线？<br />
  &lt;a href=&quot;#&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;img src=&quot;/logo.jpg&quot; border=0&gt;&lt;/a&gt;</p>
<p>24.电子邮件处理提交表单<br />
  &lt;form name=&quot;form1&quot; method=&quot;post&quot; action=mailto:****@***.com enctype=&quot;text/plain&quot;&gt; &lt;input type=submit&gt; &lt;/form&gt;</p>
<p>25.在打开的子窗口刷新父窗口的代码里如何写？<br />
  window.opener.location.reload()</p>
<p>26.如何设定打开页面的大小<br />
  &lt;body onload=&quot;top.resizeTo(300,200);&quot;&gt;<br />
  打开页面的位置&lt;body onload=&quot;top.moveBy(300,200);&quot;&gt;</p>
<p>27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动<br />
  &lt;STYLE&gt;<br />
  body<br />
  {background-image:url(/logo.gif); background-repeat:no-repeat;<br />
  background-position:center;background-attachment: fixed} &lt;/STYLE&gt; </p>
<p>28. 检查一段字符串是否全由数字组成<br />
  &lt;script language=&quot;Javascript&quot;&gt;&lt;!--<br />
  function checkNum(str){return str.match(//D/)==null}<br />
  alert(checkNum(&quot;1232142141&quot;))<br />
  alert(checkNum(&quot;123214214a1&quot;))<br />
  // --&gt;&lt;/script&gt;</p>
<p>29. 获得一个窗口的大小<br />
  document.body.clientWidth; document.body.clientHeight</p>
<p>30. 怎么判断是否是字符<br />
  if (/[^/x00-/xff]/g.test(s)) alert(&quot;含有汉字&quot;);<br />
  else alert(&quot;全是字符&quot;);</p>
<p>31.TEXTAREA自适应文字行数的多少<br />
  &lt;textarea rows=1 name=s1 cols=27 onpropertychange =&quot;this.style.posHeight=this.scrollHeight&quot;&gt;<br />
  &lt;/textarea&gt;</p>
<p>32. 日期减去天数等于第二个日期<br />
  &lt;script language=Javascript&gt;<br />
  function cc(dd,dadd)<br />
  {<br />
  //可以加上错误处理<br />
  var a = new Date(dd)<br />
  a = a.valueOf()<br />
  a = a - dadd * 24 * 60 * 60 * 1000<br />
  a = new Date(a)<br />
  alert(a.getFullYear() + &quot;年&quot; + (a.getMonth() + 1) + &quot;月&quot; + a.getDate() + &quot;日&quot;)<br />
  }<br />
  cc(&quot;12/23/2002&quot;,2)<br />
  &lt;/script&gt;</p>
<p>33. 选择了哪一个Radio<br />
  &lt;HTML&gt;&lt;script language=&quot;vbscript&quot;&gt;<br />
  function checkme()<br />
  for each ob in radio1<br />
  if ob.checked then<br />
  window.alert ob.value<br />
  next<br />
  end function<br />
  &lt;/script&gt;&lt;BODY&gt;<br />
  &lt;INPUT name=&quot;radio1&quot; type=&quot;radio&quot; value=&quot;/style&quot; checked&gt;Style &lt;INPUT name=&quot;radio1&quot; type=&quot;radio&quot; value=&quot;/blog/barcode&quot;&gt;Barcode &lt;INPUT type=&quot;button&quot; value=&quot;check&quot; onclick=&quot;checkme()&quot;&gt; &lt;/BODY&gt;&lt;/HTML&gt;</p>
<p>34.脚本永不出错<br />
  &lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
  &lt;!-- Hide<br />
  function killErrors() {<br />
  return true;<br />
  }<br />
  window.onerror = killErrors;<br />
  // --&gt;<br />
  &lt;/SCRIPT&gt;</p>
<p>35.ENTER键可以让光标移到下一个输入框<br />
  &lt;input onkeydown=&quot;if(event.keyCode==13)event.keyCode=9&quot;&gt;</p>
<p>36. 检测某个网站的链接速度：<br />
  把如下代码加入&lt;body&gt;区域中:<br />
  &lt;script language=Javascript&gt;<br />
  tim=1<br />
  setInterval(&quot;tim++&quot;,100)<br />
  b=1<br />
  var autourl=new Array()<br />
  autourl[1]=1000){this.resized=true;this.style.width=1000;}&quot; align=absMiddle border=0&gt;www.njcatv.net&quot;<br />
  autourl[2]=&quot;javacool.3322.net&quot;<br />
  autourl[3]=1000){this.resized=true;this.style.width=1000;}&quot; align=absMiddle border=0&gt;www.sina.com.cn&quot;<br />
  autourl[4]=&quot;www.nuaa.edu.cn&quot;<br />
  autourl[5]=1000){this.resized=true;this.style.width=1000;}&quot; align=absMiddle border=0&gt;www.cctv.com&quot;<br />
  function butt(){<br />
  ***(&quot;&lt;form name=autof&gt;&quot;)<br />
  for(var i=1;i&lt;autourl.length;i++)<br />
  ***(&quot;&lt;input type=text name=txt&quot;+i+&quot; size=10 value=&quot;/测试中……&gt; =》&lt;input type=text name=url&quot;+i+&quot; size=40&gt; =》&lt;input type=button value=&quot;/blog/GO<br />
  onclick=window.open(this.form.url&quot;+i+&quot;.value)&gt;&lt;br&gt;&quot;)<br />
  ***(&quot;&lt;input type=submit value=刷新&gt;&lt;/form&gt;&quot;)<br />
  }<br />
  butt()<br />
  function auto(url){<br />
  document.forms[0][&quot;url&quot;+b].value=url<br />
  if(tim&gt;200)<br />
  {document.forms[0][&quot;txt&quot;+b].value=&quot;/链接超时&quot;}<br />
  else<br />
  {document.forms[0][&quot;txt&quot;+b].value=&quot;/blog/时间&quot;+tim/10+&quot;秒&quot;}<br />
  b++<br />
  }<br />
  function run(){for(var i=1;i&lt;autourl.length;i++)***(&quot;&lt;img src=http://&quot;+autourl+&quot;/&quot;+Math.random()+&quot; width=1 height=1 <br />
  onerror=auto(&quot;http://&quot;+autourl+&quot;&quot;)&gt;&quot;)}<br />
  run()&lt;/script&gt;</p>
<p>37. 各种样式的光标<br />
  auto ：标准光标<br />
  default ：标准箭头<br />
  hand ：手形光标<br />
  wait ：等待光标<br />
  text ：I形光标<br />
  vertical-text ：水平I形光标<br />
  no-drop ：不可拖动光标<br />
  not-allowed ：无效光标<br />
  help ：?帮助光标<br />
  all-scroll ：三角方向标<br />
  move ：移动标<br />
  crosshair ：十字标<br />
  e-resize<br />
  n-resize<br />
  nw-resize<br />
  w-resize<br />
  s-resize<br />
  se-resize<br />
  sw-resize</p>
<p>38.页面进入和退出的特效<br />
  进入页面&lt;meta http-equiv=&quot;Page-Enter&quot; content=&quot;revealTrans(duration=x, transition=y)&quot;&gt;<br />
  推出页面&lt;meta http-equiv=&quot;Page-Exit&quot; content=&quot;revealTrans(duration=x, transition=y)&quot;&gt; <br />
  这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:<br />
　　
0 矩形缩小   <br />
　　
1 矩形扩大   <br />
　　
2 圆形缩小  <br />
　　
3 圆形扩大   <br />
　　
4 下到上刷新   <br />
　　
5 上到下刷新  <br />
　　
6 左到右刷新   <br />
　　
7 右到左刷新   <br />
　　
8 竖百叶窗  <br />
　　
9 横百叶窗   <br />
　　
10 错位横百叶窗   <br />
　　
11 错位竖百叶窗  <br />
　　
12 点扩散   <br />
　　
13 左右到中间刷新   <br />
　　
14 中间到左右刷新  <br />
　　
15 中间到上下  <br />
　　
16 上下到中间   <br />
　　
17 右下到左上  <br />
　　
18 右上到左下   <br />
　　
19 左上到右下   <br />
　　
20 左下到右上  <br />
　　
21 横条   <br />
　　
22 竖条   <br />
　　
23 以上22种随机选择一种  </p>
<p>39.在规定时间内跳转<br />
  &lt;META http-equiv=V=&quot;REFRESH&quot; content=&quot;5;URL=http://www.51js.com&quot;&gt; </p>
<p>40.网页是否被检索<br />
  &lt;meta name=&quot;ROBOTS&quot; content=&quot;属性值&quot;&gt;<br />
　　
其中属性值有以下一些:  <br />
　　
属性值为  &quot;all&quot;: 文件将被检索，且页上链接可被查询；<br />
　　
属性值为  &quot;none&quot;: 文件不被检索，而且不查询页上的链接；<br />
　　
属性值为  &quot;index&quot;: 文件将被检索；<br />
　　
属性值为  &quot;follow&quot;: 查询页上的链接；<br />
　　
属性值为  &quot;noindex&quot;: 文件不检索，但可被查询链接；<br />
　　
属性值为  &quot;nofollow&quot;: 文件不被检索，但可查询页上的链接。</p>
<p>41、email地址的分割<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;a href=&quot;mailto:webmaster@sina.com&quot;&gt;webmaster@sina.com&lt;/a&gt;</p>
<p>42、流动边框效果的表格<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;SCRIPT&gt;<br />
  l=Array(6,7,8,9,'a','b','b','c','d','e','f')<br />
  Nx=5;Ny=35<br />
  t=&quot;&lt;table border=0 cellspacing=0 cellpadding=0 height=&quot;+((Nx+2)*16)+&quot;&gt;&lt;tr&gt;&quot;<br />
  for(x=Nx;x&lt;Nx+Ny;x++)<br />
  t+=&quot;&lt;td width=16 id=a_mo&quot;+x+&quot;&gt;　&lt;/td&gt;&quot;<br />
  t+=&quot;&lt;/tr&gt;&lt;tr&gt;&lt;td width=10 id=a_mo&quot;+(Nx-1)+&quot;&gt;　&lt;/td&gt;&lt;td colspan=&quot;+(Ny-2)+&quot; rowspan=&quot;+(Nx)+&quot;&gt;　&lt;/td&gt;&lt;td width=16 id=a_mo&quot;+(Nx+Ny)+&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&quot;<br />
  for(x=2;x&lt;=Nx;x++)<br />
  t+=&quot;&lt;tr&gt;&lt;td width=16 id=a_mo&quot;+(Nx-x)+&quot;&gt;　&lt;/td&gt;&lt;td width=16 id=a_mo&quot;+(Ny+Nx+x-1)+&quot;&gt;　&lt;/td&gt;&lt;/tr&gt;&quot;<br />
  t+=&quot;&lt;tr&gt;&quot;<br />
  for(x=Ny;x&gt;0;x--)<br />
  t+=&quot;&lt;td width=16 id=a_mo&quot;+(x+Nx*2+Ny-1)+&quot;&gt;　&lt;/td&gt;&quot;<br />
  ***(t+&quot;&lt;/tr&gt;&lt;/table&gt;&quot;)<br />
  var N=Nx*2+Ny*2<br />
  function f1(y){<br />
  for(i=0;i&lt;N;i++){<br />
  c=(i+y)%20;if(c&gt;10)c=20-c<br />
  document.all[&quot;a_mo&quot;+(i)].bgColor=&quot;&quot;&quot;&quot;#0000&quot;+l[c]+l[c]+&quot;'&quot;}<br />
  y++<br />
  setTimeout('f1('+y+')','1')}<br />
  f1(1)<br />
  &lt;/SCRIPT&gt;</p>
<p>43、JavaScript主页弹出窗口技巧<br />
  窗口中间弹出<br />
  &lt;script&gt;<br />
  window.open(&quot;http://www.cctv.com&quot;,&quot;&quot;,&quot;width=400,height=240,top=&quot;+(screen.availHeight-240)/2+&quot;,left=&quot;+(screen.availWidth-400)/2);<br />
  &lt;/script&gt;<br />
  ============<br />
  &lt;html&gt;<br />
  &lt;head&gt;<br />
  &lt;script language=&quot;LiveScript&quot;&gt;<br />
  function WinOpen() {<br />
  msg=open(&quot;&quot;,&quot;DisplayWindow&quot;,&quot;toolbar=no,directories=no,menubar=no&quot;);<br />
  msg.***(&quot;&lt;HEAD&gt;&lt;TITLE&gt;哈 罗!&lt;/TITLE&gt;&lt;/HEAD&gt;&quot;);<br />
  msg.***(&quot;&lt;CENTER&gt;&lt;H1&gt;酷 毙 了!&lt;/H1&gt;&lt;h2&gt;这 是&lt;B&gt;JavaScript&lt;/B&gt;所 开 的 视 窗!&lt;/h2&gt;&lt;/CENTER&gt;&quot;);<br />
  }<br />
  &lt;/script&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
  &lt;form&gt;<br />
  &lt;input type=&quot;button&quot; name=&quot;Button1&quot; value=&quot;Push me&quot; onclick=&quot;WinOpen()&quot;&gt;<br />
  &lt;/form&gt;<br />
  &lt;/body&gt;<br />
  &lt;/html&gt;<br />
  ==============<br />
  一、在下面的代码中，你只要单击打开一个窗口，即可链接到赛迪网。而当你想关闭时，只要单击一下即可关闭刚才打开的窗口。<br />
　　
代码如下：   <br />
　　
  &lt;SCRIPT language=&quot;JavaScript&quot;&gt; <br />
　　
  &lt;！-- <br />
　　
function openclk() {   <br />
　　
another=open('1000){this.resized=true;this.style.width=1000;}  &quot; align=absMiddle border=0&gt;http://www.ccidnet.com'，'NewWindow'); <br />
　　
}   <br />
　　
function closeclk() {   <br />
　　
another.close();   <br />
　　
}   <br />
　　
//--  &gt; <br />
　　
  &lt;/SCRIPT&gt; <br />
　　
  &lt;FORM&gt; <br />
　　
  &lt;INPUT TYPE=&quot;BUTTON&quot; NAME=&quot;open&quot; value=&quot;/打开一个窗口&quot; onClick=&quot;openclk()&quot;&gt; <br />
　　
  &lt;BR&gt; <br />
　　
  &lt;INPUT TYPE=&quot;BUTTON&quot; NAME=&quot;close&quot; value=&quot;/blog/关闭这个窗口&quot; onClick=&quot;closeclk()&quot;&gt; <br />
　　
  &lt;/FORM&gt; <br />
　　
二、上面的代码也太静了，为何不来点动感呢？如果能给页面来个降落效果那该多好啊！   <br />
　　
代码如下：   <br />
　　
  &lt;script&gt; <br />
　　
function drop(n) {   <br />
　　
if(self.moveBy){   <br />
　　
self.moveBy (0，-900);   <br />
　　
for(i = n; i   &gt; 0; i--){ <br />
　　
self.moveBy(0，3);   <br />
　　
}   <br />
　　
for(j = 8; j   &gt; 0; j--){ <br />
　　
self.moveBy(0，j);   <br />
　　
self.moveBy(j，0);   <br />
　　
self.moveBy(0，-j);   <br />
　　
self.moveBy(-j，0);   <br />
　　
}   <br />
　　
}   <br />
　　
}   <br />
　　
  &lt;/script&gt; <br />
　　
  &lt;body onLoad=&quot;drop(300)&quot;&gt; <br />
　　
三、讨厌很多网站总是按照默认窗口打开，如果你能随心所欲控制打开的窗口那该多好。   <br />
　　
代码如下:   <br />
　　
  &lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt; <br />
　　
  &lt;！-- Begin <br />
　　
function popupPage(l， t， w， h) {   <br />
　　
var windowprops =   &quot;location=no，scrollbars=no，menubars=no，toolbars=no，resizable=yes&quot; + <br />
　　
  &quot;，left=&quot; + l + &quot;，top=&quot; + t + &quot;，width=&quot; + w + &quot;，height=&quot; + h; <br />
　　
var URL =   &quot;http://www.80cn.com&quot;; <br />
　　
popup = window.open(URL，  &quot;MenuPopup&quot;，windowprops); <br />
　　
}   <br />
　　
// End --  &gt; <br />
　　
  &lt;/script&gt; <br />
　　
  &lt;table&gt; <br />
　　
  &lt;tr&gt; <br />
　　
  &lt;td&gt; <br />
　　
  &lt;form name=popupform&gt; <br />
　　
  &lt;pre&gt; <br />
　　
打开页面的参数  &lt;br&gt; <br />
　　
离开左边的距离:   &lt;input type=text name=left size=2 maxlength=4&gt; pixels <br />
　　
离开右边的距离:   &lt;input type=text name=top size=2 maxlength=4&gt; pixels <br />
　　
窗口的宽度:   &lt;input type=text name=width size=2 maxlength=4&gt; pixels <br />
　　
窗口的高度:   &lt;input type=text name=height size=2 maxlength=4&gt; pixels <br />
　　
  &lt;/pre&gt; <br />
　　
  &lt;center&gt; <br />
　　
  &lt;input type=button value=&quot;打开这个窗口！&quot; onClick=&quot;popupPage(this.form.left.value， this.form.top.value， this.form.width.value，<br />
  this.form.height.value)&quot;&gt; <br />
　　
  &lt;/center&gt; <br />
　　
  &lt;/form&gt; <br />
　　
  &lt;/td&gt; <br />
　　
  &lt;/tr&gt; <br />
　　
  &lt;/table&gt;你只要在相对应的对话框中输入一个数值即可，将要打开的页面的窗口控制得很好。 </p>
<p>44、页面的打开移动<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
  &lt;!-- Begin<br />
  for (t = 2; t &gt; 0; t--) {<br />
  for (x = 20; x &gt; 0; x--) {<br />
  for (y = 10; y &gt; 0; y--) {<br />
  parent.moveBy(0,-x);<br />
  }<br />
  }<br />
  for (x = 20; x &gt; 0; x--) {<br />
  for (y = 10; y &gt; 0; y--) {<br />
  parent.moveBy(0,x);<br />
  }<br />
  }<br />
  for (x = 20; x &gt; 0; x--) {<br />
  for (y = 10; y &gt; 0; y--) {<br />
  parent.moveBy(x,0);<br />
  }<br />
  }<br />
  for (x = 20; x &gt; 0; x--) {<br />
  for (y = 10; y &gt; 0; y--) {<br />
  parent.moveBy(-x,0);<br />
  }<br />
  } <br />
  }<br />
  //--&gt;<br />
  //   End --&gt;<br />
  &lt;/script&gt;</p>
<p>45、显示个人客户端机器的日期和时间<br />
  &lt;script language=&quot;LiveScript&quot;&gt;<br />
  &lt;!-- Hiding<br />
  today = new Date()<br />
  ***(&quot;现 在 时 间 是： &quot;,today.getHours(),&quot;:&quot;,today.getMinutes())<br />
  ***(&quot;&lt;br&gt;今 天 日 期 为： &quot;, today.getMonth()+1,&quot;/&quot;,today.getDate(),&quot;/&quot;,today.getYear());<br />
  // end hiding contents --&gt;<br />
  &lt;/script&gt;</p>
<p>46、自动的为你每次产生最後修改的日期了： <br />
  &lt;html&gt;<br />
  &lt;body&gt;<br />
  This is a simple HTML- page.<br />
  &lt;br&gt;<br />
  Last changes:<br />
  &lt;script language=&quot;LiveScript&quot;&gt;<br />
  &lt;!--   hide script from old browsers<br />
  ***(document.lastModified)<br />
  // end hiding contents --&gt;<br />
  &lt;/script&gt;<br />
  &lt;/body&gt;<br />
  &lt;/html&gt;</p>
<p>47、不能为空和邮件地址的约束：<br />
  &lt;html&gt;<br />
  &lt;head&gt;<br />
  &lt;script language=&quot;JavaScript&quot;&gt;<br />
  &lt;!-- Hide<br />
  function test1(form) {<br />
  if (form.text1.value == &quot;&quot;)<br />
  alert(&quot;您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !&quot;)<br />
  else { <br />
  alert(&quot;嗨 &quot;+form.text1.value+&quot;! 您 已 输 入 完 成 !&quot;);<br />
  }<br />
  }<br />
  function test2(form) {<br />
  if (form.text2.value == &quot;&quot; || <br />
  form.text2.value.indexOf('@', 0) == -1) <br />
  alert(&quot;这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !&quot;);<br />
  else alert(&quot;您 已 输 入 完 成 !&quot;);<br />
  }<br />
  // --&gt;<br />
  &lt;/script&gt;<br />
  &lt;/head&gt;<br />
  &lt;body&gt;<br />
  &lt;form name=&quot;first&quot;&gt;<br />
  Enter your name:&lt;br&gt;<br />
  &lt;input type=&quot;text&quot; name=&quot;text1&quot;&gt;<br />
  &lt;input type=&quot;button&quot; name=&quot;button1&quot; value=&quot;输 入 测 试&quot; onClick=&quot;test1(this.form)&quot;&gt;<br />
  &lt;P&gt;<br />
  Enter your e-mail address:&lt;br&gt;<br />
  &lt;input type=&quot;text&quot; name=&quot;text2&quot;&gt;<br />
  &lt;input type=&quot;button&quot; name=&quot;button2&quot; value=&quot;输 入 测 试&quot; onClick=&quot;test2(this.form)&quot;&gt;<br />
  &lt;/body&gt;</p>
<p>48、跑马灯<br />
  &lt;html&gt;<br />
  &lt;head&gt;<br />
  &lt;script language=&quot;JavaScript&quot;&gt;<br />
  &lt;!-- Hide<br />
  var scrtxt=&quot;怎麽样 ! 很酷吧 ! 您也可以试试.&quot;+&quot;Here goes your message the visitors to your <br />
  page will &quot;+&quot;look at for hours in pure fascination...&quot;;<br />
  var lentxt=scrtxt.length;<br />
  var width=100;<br />
  var pos=1-width;<br />
  function scroll() {<br />
  pos++;<br />
  var scroller=&quot;&quot;;<br />
  if (pos==lentxt) {<br />
  pos=1-width;<br />
  }<br />
  if (pos&lt;0) {<br />
  for (var i=1; i&lt;=Math.abs(pos); i++) {<br />
  scroller=scroller+&quot; &quot;;}<br />
  scroller=scroller+scrtxt.substring(0,width-i+1);<br />
  }<br />
  else {<br />
  scroller=scroller+scrtxt.substring(pos,width+pos);<br />
  }<br />
  window.status = scroller;<br />
  setTimeout(&quot;scroll()&quot;,150);<br />
  }<br />
  //--&gt;<br />
  &lt;/script&gt;<br />
  &lt;/head&gt;<br />
  &lt;body onLoad=&quot;scroll();return true;&quot;&gt;<br />
  这里可显示您的网页 !<br />
  &lt;/body&gt;<br />
  &lt;/html&gt;</p>
<p>49、在网页中用按钮来控制前页，后页和主页的显示。<br />
  &lt;html&gt;<br />
  &lt;body&gt;<br />
  &lt;FORM NAME=&quot;buttonbar&quot;&gt;<br />
  &lt;INPUT TYPE=&quot;button&quot; VALUE=&quot;Back&quot; onClick=&quot;history.back()&quot;&gt;<br />
  &lt;INPUT TYPE=&quot;button&quot; VALUE=&quot;JS- Home&quot; onClick=&quot;location='script.html'&quot;&gt;<br />
  &lt;INPUT TYPE=&quot;button&quot; VALUE=&quot;Next&quot; onCLick=&quot;history.forward()&quot;&gt;<br />
  &lt;/FORM&gt;<br />
  &lt;/body&gt;<br />
  &lt;/html&gt;<br />
  50、查看某网址的源代码<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;SCRIPT&gt;<br />
  function add()<br />
  {<br />
  var ress=document.forms[0].luxiaoqing.value<br />
  window.location=&quot;view-source:&quot;+ress;<br />
  }<br />
  &lt;/SCRIPT&gt;<br />
  输入要查看源代码的URL地址:<br />
  &lt;FORM&gt;&lt;input type=&quot;text&quot; name=&quot;luxiaoqing&quot; size=40 value=&quot;http://&quot;&gt;&lt;/FORM&gt;<br />
  &lt;FORM&gt;&lt;br&gt;<br />
  &lt;INPUT type=&quot;button&quot; value=&quot;查看源代码&quot; onClick=add()&gt;<br />
  &lt;/FORM&gt;</p>
<p>51、title显示日期<br />
  把如下代码加入&lt;body&gt;区域中:<br />
  &lt;script language=&quot;JavaScript1.2&quot;&gt;<br />
  &lt;!--hide<br />
  var isnMonth = new<br />
  Array(&quot;1月&quot;,&quot;2月&quot;,&quot;3月&quot;,&quot;4月&quot;,&quot;5月&quot;,&quot;6月&quot;,&quot;7月&quot;,&quot;8月&quot;,&quot;9月&quot;,&quot;10月&quot;,&quot;11月&quot;,&quot;12月&quot;);<br />
  var isnDay = new<br />
  Array(&quot;星期日&quot;,&quot;星期一&quot;,&quot;星期二&quot;,&quot;星期三&quot;,&quot;星期四&quot;,&quot;星期五&quot;,&quot;星期六&quot;,&quot;星期日&quot;);<br />
  today = new Date () ;<br />
  Year=today.getYear();<br />
  Date=today.getDate();<br />
  if (document.all)<br />
  document.title=&quot;今天是: &quot;+Year+&quot;年&quot;+isnMonth[today.getMonth()]+Date+&quot;日&quot;+isnDay[today.getDay()]<br />
  //--hide--&gt;<br />
  &lt;/script&gt;</p>
<p>52、显示所有链接<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;script language=&quot;JavaScript1.2&quot;&gt;<br />
  &lt;!--<br />
  function extractlinks(){<br />
  var links=document.all.tags(&quot;A&quot;)<br />
  var total=links.length<br />
  var win2=window.open(&quot;&quot;,&quot;&quot;,&quot;menubar,scrollbars,toolbar&quot;)<br />
  win2.***(&quot;&lt;font size='2'&gt;一共有&quot;+total+&quot;个连接&lt;/font&gt;&lt;br&gt;&quot;)<br />
  for (i=0;i&lt;total;i++){<br />
  win2.***(&quot;&lt;font size='2'&gt;&quot;+links[i].outerHTML+&quot;&lt;/font&gt;&lt;br&gt;&quot;)<br />
  }<br />
  }<br />
  //--&gt;<br />
  &lt;/script&gt;<br />
  &lt;input type=&quot;button&quot; onClick=&quot;extractlinks()&quot; value=&quot;显示所有的连接&quot;&gt;</p>
<p>53、回车键换行<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;script type=&quot;text/javascript&quot;&gt; <br />
  function handleEnter (field, event) {<br />
  var keyCode = event.keyCode ? event.keyCode : event.which ?<br />
  event.which : event.charCode;<br />
  if (keyCode == 13) {<br />
  var i;<br />
  for (i = 0; i &lt; field.form.elements.length; i++)<br />
  if (field == field.form.elements[i])<br />
  break;<br />
  i = (i + 1) % field.form.elements.length;<br />
  field.form.elements[i].focus();<br />
  return false;<br />
  } <br />
  else<br />
  return true;<br />
  } <br />
  &lt;/script&gt;<br />
  &lt;form&gt;<br />
  &lt;input type=&quot;text&quot; onkeypress=&quot;return handleEnter(this, event)&quot;&gt;&lt;br&gt;<br />
  &lt;input type=&quot;text&quot; onkeypress=&quot;return handleEnter(this, event)&quot;&gt;&lt;br&gt;<br />
  &lt;textarea&gt;回车换行</p>
<p>54、确认后提交<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
  &lt;!--<br />
  function msg(){<br />
  if (confirm(&quot;你确认要提交嘛！&quot;))<br />
  document.lnman.submit()<br />
  }<br />
  //--&gt;<br />
  &lt;/SCRIPT&gt;<br />
  &lt;form name=&quot;lnman&quot; method=&quot;post&quot; action=&quot;&quot;&gt;<br />
  &lt;p&gt;<br />
  &lt;input type=&quot;text&quot; name=&quot;textfield&quot; value=&quot;确认后提交&quot;&gt;<br />
  &lt;/p&gt;<br />
  &lt;p&gt;<br />
  &lt;input type=&quot;button&quot; name=&quot;Submit&quot; value=&quot;提交&quot; onclick=&quot;msg();&quot;&gt;<br />
  &lt;/p&gt;<br />
  &lt;/form&gt;</p>
<p>55、改变表格的内容<br />
  把如下代码加入&lt;body&gt;区域中<br />
  &lt;script ***script&gt;<br />
  var arr=new Array()<br />
  arr[0]=&quot;一一一一一&quot;;<br />
  arr[1]=&quot;二二二二二&quot;;<br />
  arr[2]=&quot;三三三三三&quot;;<br />
  &lt;/script&gt;<br />
  &lt;select onchange=&quot;zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]&quot;&gt;<br />
  &lt;option value=a&gt;改变第一格&lt;/option&gt;<br />
  &lt;option value=a&gt;改变第二格&lt;/option&gt;<br />
  &lt;option value=a&gt;改变第三格&lt;/option&gt;<br />
  &lt;/select&gt;<br />
  &lt;table id=zz border=1&gt;<br />
  &lt;tr height=20&gt;<br />
  &lt;td width=150&gt;第一格&lt;/td&gt;<br />
  &lt;td width=150&gt;第二格&lt;/td&gt;<br />
  &lt;td width=150&gt;第三格&lt;/td&gt;<br />
  &lt;/tr&gt;<br />
  &lt;/table&gt;</p>

四、使用innerhtml创建TAB效果

<HTML>
<HEAD>
<script>
var Num=4; //这里是增加选项卡的数目
var carNum=2+Num
function document.onselectstart()
{
var obj=event.srcElement 
if(obj.tagName=="SPAN")
{
return false;
}
}
function document.onmousedown()
{
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span")
{
 for(i=1;i<carNum;i++)
 {
 if(pobj==("btn"+i))
 {
 document.all("td"+i).style.backgroundColor="menu"
 document.all("btn"+i).style.height=20
 content(i)
 }
 else
 {
 document.all("td"+i).style.backgroundColor="white"
 document.all("btn"+i).style.height=18
 }
 }
} 
}
function content(i)
{
//这里是菜单名
mnuItem(1,"第一项")
mnuItem(2,"图片世界")
mnuItem(3,"第三个内容")
mnuItem(4,"表格")
mnuItem(5,"滚动字幕")
//End
if(i==1)
{
span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>"
+"<input><br><input><br><input type=submit>"
}
if(i==2)
{
span1.innerHTML="<img src=http://www.webjx.com/images/logo.gif width=250>"
}
if(i==3)
{
span1.innerHTML="<h1>第三个内容</h1>"}
if(i==4)
{
span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>"
+"<tr><td>aaaaaaaa</td></tr>"
+"<tr><td>bbbbbbbb</td></tr>"
+"<tr><td>ccccccccc</td></tr></table>"
}
if(i==5)
{
span1.innerHTML="<marquee>"
+"这是第五个内容"
+"啦啦..？</marquee>"
}
}
function mnuItem(i,con)
{
document.all("MenuName"+i).innerText=con
}
</script>
<style>td{font-size:9pt}
.span{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:100%;
height:100%;
}
</style>
<TITLE></TITLE>
<META http-equiv="content-type" content="text/html;charset=gb2312">
</HEAD>
<BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false">
<p>
<table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td>
<table cellpadding=0 cellspacing=0 onselectstart="return false">
 <tr height=20>
<td valign=bottom>
 <table cellspacing=0 cellpadding=0 bgcolor=menu>
 <tr>
 <td width=1 height=1></td><td width=1 height=1></td>
 <td bgcolor=white></td><td></td><td></td>
 </tr>
 <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>
 <td></td><td bgcolor=black></td><td></td>
 </tr>
 <tr><td width=1 bgcolor=white></td><td width=1 height=1></td>
 <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>
 </tr>
 <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td>
 </tr>
 </table>
</td>
<script>
for(i=2;i<carNum;i++)
{
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>"
tdBody+="<tr>"
tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>"
tdBody+="<td bgcolor=white><\/td><td></td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>"
tdBody+="<td></td><td bgcolor=black><\/td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>"
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>"
tdBody+="<\/tr>"
tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>"
tdBody+="<\/tr>"
tdBody+="<\/table>"
tdBody+="<\/td>";
document.write(tdBody)
}
</script>
</td>
<td style="border-bottom:1 white solid" width=50> </td> </tr>
</table>
<div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset">
<span id=span1></span><!--这里是内容-->
</div>
</td></tr></table>
</BODY>
</HTML>

五、动态显示内容

<HTML>
<HEAD>
<TITLE>动态显示内容</TITLE>
<SCRIPT type="text/javascript">
function changeSrc()
  {
  var img=document.getElementById("myImage");	//获得对象
  img.src="images/cat2.gif";							//改变属性
  document.getElementById("btn").innerText="吃的太快,噎着了";		//替换文字显示
  }
</SCRIPT>
</HEAD>

<BODY>
<center>
<IMG id="myImage" src="images/cat.gif"  /><BR>
<INPUT type="button" id="btn" onClick="changeSrc()" value="我吃,我吃,我吃吃吃！！！">
</BODY>

</HTML>

七、打字练习

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>无标题文档</TITLE>
<SCRIPT language="javascript">
 var i=0; 
 function check( )
 {
    var keycode = event.keyCode ;
  　var realkey = String.fromCharCode(event.keyCode+32) ;
     var str=document.getElementById("test").innerText;
	 if (str.substring(i,i+1)==realkey )
	       document.getElementById("myspan"+i).className='STYLE2 ';
	 i++;
	
 }
</SCRIPT>
<STYLE type="text/css">
<!--
.STYLE1 {color: black}
.STYLE2 {color: red}
-->
</STYLE>
</HEAD>

<BODY>
<P>&nbsp;</P>
<FORM name="form1" method="post" action=""  >
  打字练习：<DIV id="test"  style="display:inline">
  <SCRIPT language="javascript">
   var str="hello，welcome to study center！" //希望练习的内容
   var htmlstr="";
   for(var j=0;j<str.length;j++)
      htmlstr=htmlstr+"<SPAN class='STYLE1' id='myspan"+j+"'>"+str.substring(j,j+1)+"</SPAN>";
  document.write(htmlstr) ;
 </SCRIPT>
 </div>
  <P>键入内容：
    <INPUT name="textfield" type="text" size="50" onKeyDown="check( )">
  </P>
</FORM>

<P>&nbsp;</P>
</BODY>

</HTML>

八、使用innertext实现打字效果

<span id="demo"></span> 
<script defer> 
var text="JavaScript实现的打字效果"    //预定文字 
var delay=200                         //文字出现的时间间隔 
var i=0                               //初始化变量 i 
function scrollit(){ 
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_" 
demo.innerText=text.slice(0,i++)+"_"    
if(i>text.length){              //当 i 大于 text 的文本长度时 
    i=0                           //重设 i 为 0，使文字重新从第一个文字出现 
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点 
    setTimeout("scrollit()",delay*10)   
} 
    //否则在delay毫秒后再次执行scrollit()函数 
else setTimeout("scrollit()",delay)              
} 
scrollit() //调用scrollit()函数 
</script>

九、动态添加表格行

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function insRow( )
  {
  var maxrow=document.getElementById('myTable').rows.length;
  var x=document.getElementById('myTable').insertRow(maxrow)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  var d=x.insertCell(2)
  y.innerHTML="<input class=myInput type=text  size=20   value=''   >" 
  z.innerHTML="<input class=myInput type=text  size=20   value=''>"
  d.innerHTML="<input class=myInput type=text  size=20   value=''>"
  }
</SCRIPT>
<STYLE type="text/css">
.myInput{BORDER: 1px solid;}
</STYLE>
</HEAD>

<BODY>
购买清单
<TABLE width="276" border="1" id="myTable">
<TR>
<TD width="136">购买物品</TD>
<TD width="124"> 数 量</TD>
<TD width="124"> 价 格</TD>
</TR>
<TR>
<TD>U盘</TD>
<TD>2</TD>
<TD>20</TD>
</TR>
<TR>
<TD>Q笔</TD>
<TD>3</TD>
<TD>30</TD>
</TR>
</TABLE>
<BR />
<INPUT name="button" type="button" onClick="insRow()" value="添加记录">
</BODY>
</HTML>

十、可编辑列表

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.divClass{height:250px;width:100%;overflow:auto;}
td{height:22px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;border-right:1px solid black;background-color:#999999}
table{border-top:1px solid black;border-left:1px solid black;font-size:13px;}
input{border:1px solid black;}
.TrOdd{font-family: "宋体";font-size: 12px;background-color: #FFFFFF;}
.TrEven{font-family: "宋体";font-size: 12px;background-color: #CCCCCC;}
</style>
<script language="javascript">
/*****************************可以把下面这部分代码提到一个js文件中***************************/
/*********************************** powerTableEdit.js *********************************/
/****************************************************************************************
 * created by LxcJie 2004.3.1
 *
 * 用法：
 *    1，首先创建表格对象： var pt = new PowerTableEdit("table1"); 
 *                          其中，"table1"为表格的id
 *                          
 *    2，设置表格的编辑方式,调用pt对象的setCol方法，此方法有三个参数：
 *    
 *                          setCol(colNum,colSty,sDa)
 *                          
 *                          > colNum：为准备编辑的列编号，第一列编号为0
 *                          > colSty：为准备编辑的方式，txt为文本编辑方式，sel为下拉编辑方式
 *                          > sDa：如果选择的编辑方式为下拉编辑方式，则此参数有效，代表下拉框中的预置数据，是数组类型
 *                  
 *    3, 在按钮中调用相应的方法（注意：上移行和下移行按钮的id必须为moveUp和moveDown）：如：
 *
 *      <!--增加行-->
 *      <input onclick=add_row(mainTab) type=button value=ins_row> 
 *      <!--删除行-->
 *      <input onclick=del_row(mainTab) type=button value=Del_row> 
 *      <!--重置表格-->
 *      <input onclick=res_tab() type=button value=Restore>
 *      
 *      <!--上移行-->
 *      <input id=moveUp onclick=Move_up(mainTab) type=button value=Up>
 *      <!--下移行-->       
 *      <input id=moveDown onclick=Move_down(mainTab) type=button value=Down>
 *    4, 如果想取消编辑功能，调用方法setEditable(false)
 *    5, 增加一行时，可以先调用selCellData方法，传入一个数组，来设置增加一行时没格单元格的数据
 * 
 *    5，例如：
 *              var arr = new Array();
 *              arr[0] = "a";
 *              arr[1] = "b";
 *              arr[2] = "c";
 *              
 *              var arr1 = new Array();
 *              arr1[0] = "1";
 *              arr1[1] = "2";
 *              arr1[2] = "3";
 *              
 *              //页面table的id为table1
 *              var pt = new PowerTable("table1");
 *              
 *              //表格的第一列为文本编辑方式
 *              pt.setCol(0,'txt');
 *              //表格的第二列为下拉框编辑方式，指定数据为数组arr
 *              pt.setCol(2,'sel',arr);
 *              //如果不想此表格有编辑功能 pt.setEditable(false)
 *              
 *              //增加一行时：
 *                  var arrDa = new Array();
 *                  arrDa[0] = "九";
 *                  arrDa[1] = "Tomcat";
 *                  arrDa[2] = "数据四";
 *                  arrDa[3] = "Ellise";
 *                  arrDa[4] = "aaaa";
 *                  arrDa[5] = "2.112.521";
 *                  arrDa[6] = "美国";
 *                  pt.setCellData(arrDa);  
 *                  
 *              //然后调用add_row(mainTab)方法。
 *              //也可以不设置，增加一行，则自动填充每列的列数
 *
 *修改履历：
 *      2004.04.12 刘肖冲 增加函数
 *              getColData(colIndex,isImg) //得到指定列的所有值，colIndex为列号,isImg指定此行是否为图片
 *              getRowData(rowIndex);//得到指定行的所有值，rowIndex为行号
 *
 *      2004.04.12 刘肖冲 改变select的接口
 *              var arrText = new Array();
 *              arrText[0] = "数据一";
 *              arrText[1] = "数据二";
 *              arrText[2] = "数据三";
 *              arrText[3] = "数据四";
 *              var arrValue = new Array();
 *              arrValue[0] = "1";
 *              arrValue[1] = "2";
 *              arrValue[2] = "3";
 *              arrValue[3] = "4";  
 *              pt.setCol(3,'sel',arrText,arrValue);
 *
 *              arrText为select的text，arrValue为select的value值
 *              注：构建表格时，必须select所在的所有td中指定data等于value值，例如：<td data="1">数据一</td>
 *    2004.6.28 刘肖冲修改addRow()方法
 *                      增加一条数据时，如果是select形式的编辑方式，则搜索sValue和sText
                        找到与输入值相符的value赋给td的data
 *********************************************************************************************/

var mainTab = null;
var currentRowIndex = null;
var currentCell = null;
var orgContent = "";
//标记是否能编辑
var editbleFlag = true;

var showColume = false;

//选中行默认颜色
var currentBgc  = "cornflowerblue";
//选中行字体颜色
var currentFontColor = "black";

//用来保存下拉菜单中的option项
var optionText = "";
//图片列号
var imagePos = 0;
//保存每一列的编辑类型
var colStyle = new Array();
//保存下拉框中的text和value
var sText = new Array();
var sValue = new Array();
//增加是各个单元格的数据
var cellData = new Array();
/**
 * 建立PowerTableEdit类，该类实现表格的自由编辑，删除，增加，上下移动 
 * 其中自由编辑可以指定编辑方式及哪一列需要编辑
 * 使用时，只需要利用表格的id创建PowerTableEdit对象
 */
function PowerTableEdit(tableId)
{
    //当前选中行
    currentRowIndex = null;
    //当前编辑cell
    currentCell = null;

    mainTab = document.all(tableId);
    //获取已定义的颜色
    readDef(mainTab);

    mainTab.onclick = clickIt;
    //mainTab.ondblclick    = dblclickIt;
    
    //设置select下拉框的数据
    this.setCol = setColStyle;
    this.setEditable = setEditable;
    this.setCellData = setCellData;
    this.getColData = getColData;
    this.getRowData = getRowData;
    //原始表格，可以支持reset
    orgContent = mainTab.outerHTML;

    //初始化增加表格的数据  
    for(var i=0; i < mainTab.rows[0].cells.length; i++)
        cellData[i] = "&nbsp;"; 
    setEvenOddColor(mainTab);
}

//为select的onchange事件指定动作
function selectChangeAction()
{
    var cellNum = currentCell.cellIndex;
    var valueOfSel = document.all.powerTableSel.value;
    //给单元格的data赋值
    event.srcElement.parentNode.data = event.srcElement.value;
    
    //动作代理
    selectProxy(cellNum,valueOfSel);
}
function selectProxy(cellNum, valueOfSel)
{}

//获取指定列的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容，
//如果是下拉框编辑方式，则返回其value值，即td中的data值
//colIndex为列号，isImg为是否为图片
function getColData(colIndex,isImg)
{
    if(colIndex == "")
        return null;
    var colNum = colIndex == null ? 0 : colIndex;
    //如果为指定此参数，则默认为false，即不是图片格式数据
    var isImgCol = isImg == null ? false : isImg;
    var arrCelData = new Array();
    if(/\D/g.test(colNum) 
        || colNum >= mainTab.rows[0].cells.length
         || colNum < 0)
        return null;
    if(isImgCol)
    {
        for(var i=1; i<mainTab.rows.length; i++)
        {
            if(mainTab.rows[i].cells[0].children[0]
                && mainTab.rows[i].cells[0].children[0].tagName.toLowerCase() == "img")
                arrCelData[i-1] = mainTab.rows[i].cells[0].data;
            else
                arrCelData[i-1] = null;
        }
    }   
    else
    { 
        if(colStyle[parseInt(colNum)] == "txt")
        {
            for(var i=1; i<mainTab.rows.length; i++)
            {
                if(mainTab.rows[i].cells[colNum].children.length>0) 
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].children[0].value;
                else
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;
            }               
        }
        else if(colStyle[parseInt(colNum)] == "sel")
        {
            for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].data;
        }
        else
        {
                for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;              
        }
    }
    return arrCelData;
}

//获取指定行的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容，
//如果是下拉框编辑方式，则返回其value值，即td中的data值
//rowIndex为列号，isImg为是否为图片，如果是图片，则返回图片的id
function getRowData(rowIndex)
{
    var arrRowData = new Array();
    var rowNum = rowIndex == null ? 1 : rowIndex;
    if(/\D/g.test(rowNum) 
        || rowNum >= mainTab.rows.length
         || rowNum <= 0)
        return null;
    for(var i=0; i<mainTab.rows[rowIndex].cells.length; i++)
    {
        with(mainTab.rows[rowIndex].cells[i])
        {
            if(children.length > 0)
            {
                if(children[0].tagName.toLowerCase() == "img")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "select")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "input")
                    arrRowData[i] = children[0].value;
                else
                    arrRowData[i] = innerText;
            }
            else
            {
                if(colStyle[i] == "sel")
                    arrRowData[i] = data;
                else
                    arrRowData[i] = innerText;
            }
        }
    }
    return arrRowData;
}

//如果是input或textarea,则允许选中里面的文字
document.onselectstart = function()
                         {
                             var oObj = event.srcElement;
                             if(oObj.tagName.toLowerCase() != "input" 
                                && oObj.tagName.toLowerCase()!= "textarea")
                                return false;
                         }

/**
 *  设置编辑方式
 *  colNum 为列编号
 *  colSty为编辑类型，分为：txt－文本框编辑； sel－下拉框 编辑 
 *  sDa 当编辑方式是下拉框方式时，传入下拉框中的数据数组
 */
function setColStyle(colNum,colSty,sTxt,sVal)
{
    colStyle[parseInt(colNum)] = colSty;
    sText[parseInt(colNum)] = sTxt == null ? "" : sTxt;
    sValue[parseInt(colNum)] = sVal == null ? "" : sVal;
}

//在表格的指定位置插入标记图标，其中，
//oImg是用来插入的图标对象，
//rIndex，是没个图标的id，如果一列中要采用不同的标志，该值不可相同
//nCell,为设置的图标的列，默认为第一列
function insertImg(oImg,rIndex,nCell)
{
    if(nCell == null)
        nCell = 0;
    else
        imagePos = nCell;

    var sHtml = "<img id=imgIndex_"+rIndex+" src='"+oImg.src+"' width=16 height=16/>";
    
    if(!currentRowIndex)
    {
        alert("请选中要设置图片的行！");
        return;
    }
    
    //检测所选行已经存在标志时的情况
    if(mainTab.rows[currentRowIndex].cells[nCell].children[0])
    {
        if(mainTab.rows[currentRowIndex].cells[nCell].children[0].id != "imgIndex_"+rIndex)
            alert("此位置已经存在其它的标志！");
        else
            return;
    }       
    else
    {
        //遍历整个表格，把原始标志还原
        for(var i=0; i<mainTab.rows.length; i++)
        {
            with(mainTab.rows[i].cells[nCell])
            {
                if(children[0] && children[0].id == 'imgIndex_'+rIndex && i!= currentRowIndex)
                {
                    innerHTML = "&nbsp;";
                    data = null;
                }
            }
        }
        //置新标志
        mainTab.rows[currentRowIndex].cells[nCell].innerHTML = sHtml;
        mainTab.rows[currentRowIndex].cells[nCell].data = rIndex;
    }
}

//设置是否需要编辑的标记，如果设为true，则表格能编辑，反之不能，默认为可以编辑
function setEditable(editFlag)
{
    if(editFlag == null)
        editbleFlag == true;
    else
        editbleFlag = editFlag;
}

//设置增加时各个单元格的数据
function setCellData(arrData)
{
    //如果没有设置数据，则插入各个单元格所在的列数
    if(arrData == null)
    {
        for(var i=0; i<mainTab.rows[0].cells.length; i++)
            cellData[i] = i;
    }
    else
    {
        if(arrData.length >= arrData.length)
        {
            for(var i=0; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = arrData[i];
        }
        //数据不足，补以列号
        if(arrData.length < mainTab.rows[0].cells.length)
        {
            for(var i=0; i<arrData.length; i++)
                cellData[i] = arrData[i];
            for(var i= arrData.length; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = i;
        }
    }
}

function clearColor()
{
    objTable=mainTab;
    if (currentCell != null)
        if (currentCell.children.length>0)
    {
        if(currentCell.children[0].tagName.toLowerCase() == "input")
            currentCell.innerText=currentCell.children[0].value;
        else if(currentCell.children[0].tagName.toLowerCase() == "select")
            currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;      
    }
    ClearColor(objTable,currentRowIndex,currentCell);
}

function document.onclick()
{
    clearColor();
    currentRowIndex  = null;
    currentCell = null;
}

function readDef(objTable)
{
    ReadOrgColor(objTable);
}

function clickIt()
{
    event.cancelBubble=true;
    var currentObject = event.srcElement;
    var i = 0 ,j = 0;
    //原编辑项变为表格  
    if(currentCell!=null && currentRowIndex!=0
        && currentObject.type!="select-one" 
            && currentObject.type!="text")
    if (currentCell.children.length>0 )
    {
        if(currentCell.children[0].tagName.toLowerCase() != "img"
             && currentCell.children[0].tagName.toLowerCase() != "a")
        {
            if(currentCell.children[0].tagName.toLowerCase() == "input")
                currentCell.innerText=currentCell.children[0].value;
            else if(currentCell.children[0].tagName.toLowerCase() == "select")
                currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
        }
    }
    if(currentObject.tagName.toLowerCase() != "table" 
        && currentObject.tagName.toLowerCase() != "tbody" 
           && currentObject.tagName.toLowerCase() != "tr")
    {
        var currentTd   = getElement(currentObject,"td");
        if(currentTd==null) return;
        
        //modified 2004.04.09 更改点击图标，链接可以选择单行
        if (currentTd.children.length<=0 
            || currentTd.children[0].tagName.toLowerCase() == "a"
             || currentTd.children[0].tagName.toLowerCase() == "img")
        //end modified 2004.04.09 更改点击图标，链接可以选择单行
        {
            var currentTr   = currentTd.parentElement;
            var objTable = getElement(currentTd,"table");
            var i = 0;
            clearColor();
            currentRowIndex = currentTr.rowIndex;
            //设置选中的行
            if(currentRowIndex!=0)
            {
                for(i=0;i<currentTr.cells.length;i++)
                {
                    with(currentTr.cells[i])
                    {
                        style.backgroundColor=currentBgc;
                        style.color=currentFontColor;
                    }
                }
            }
        }

        //根据标记设置是否可编辑
        if(editbleFlag)
        {
            currentCell= currentTd;
                
            /*根据不同的设置进行编辑选择*/
            if(currentCell.children.length!=1 && currentCell.parentNode.rowIndex != 0)  
            {
                var cellN = currentCell.cellIndex;
                if(colStyle[parseInt(cellN)] == 'txt')
                    editCell(mainTab,currentCell,'txt',true);   
                else if(colStyle[parseInt(cellN)] == 'sel')
                    editCell(mainTab,currentCell,'sel',true,sText[parseInt(cellN)],sValue[parseInt(cellN)]);
                
                if(currentCell.children.length > 0)
                {
                    if(currentCell.children[0].type == "select-one")
                        currentCell.children[0].focus();
                    else
                        currentCell.children[0].select();
                }
            }
        }
    }

    selectRowProxy(currentRowIndex);
}

//增加点击一行时的代理动作，参数是选中当前行号
function selectRowProxy(currentRowIndex){}

//表格指定位置变为可编辑
//目前支持文本和下拉框
function editCell(oTable,oCell,editType,bEditable,sText,sValue)
{
    if (bEditable)
    {   
        switch(editType)
        {
            case 'txt':
                if(sText == null)
                    sText = true;
                oCell.innerHTML = "<input id=dyText type=text  size=10 onKeyDown = judgeKeyToDo() value=" 
                                  + oCell.innerText.replaceHTML() + ">";
                break;
            case 'sel':         
                var preValue = oCell.data;//获取当前表格的内容，在下拉框中选中
                for(var i=0; i<sValue.length; i++)
                {
                    //如果是原有表格的内容，则默认选中
                    if(sValue[i] == preValue)
                        optionText += "<option value='"+sValue[i]+"' selected>"+sText[i];
                    else                    
                        optionText += "<option value='"+sValue[i]+"'>"+sText[i];
                }
                oCell.innerHTML="<select id=powerTableSel onKeyDown = judgeKeyToDo()>"+optionText+"</select>";
                //为select的onchange指定事件
                oCell.children[0].onchange = selectChangeAction;
                //清空缓冲区
                optionText = "";
                break;
        }
    }
}

//向上移动指定表格的行
function Move_up(objTable)
{
    event.cancelBubble=true;
    if(currentRowIndex == null)
        return;

    if(currentRowIndex <= 1)
        return;
    else
    {
        MoveUp(objTable,currentRowIndex);
        //当前选择也上移
        --currentRowIndex;
    }
    setEvenOddColor(mainTab);
}

function Move_down(objTable)
{
    event.cancelBubble=true;
    if(currentRowIndex == null)
        return;
        
    if(currentRowIndex == mainTab.rows.length-1)
        return;
    else
    {
        MoveDown(objTable,currentRowIndex);
        //当前选择也下移
        ++currentRowIndex;
    }
    setEvenOddColor(mainTab);
}

function add_row(objTable) 
{
    event.cancelBubble=true;
    clearColor();
    var cellNow = cellData;
    //如果没选中行，则在表格的最下方插入
    var pos = currentRowIndex==null?objTable.rows.length:(currentRowIndex+1);
    addRow(objTable,pos,cellNow);

    currentCell=null;
    readDef(objTable);
    setEvenOddColor(mainTab);
    //清除设置的数据
    for(var i=0; i < mainTab.rows[0].cells.length; i++)
        cellData[i] = "&nbsp;";
}

//删除行，并处理当前选择项为不选择
function del_row(objTable) 
{
    if(currentRowIndex == null)
        return;

    if(confirm("确实要删除第"+currentRowIndex+"行吗?"))
    {
        delRow(objTable,currentRowIndex);
        currentRowIndex=null;
        currentCell=null;
        clearColor();
        setEvenOddColor(mainTab);
    }
}

function res_tab(objTable)
{
    objTable.outerHTML=orgContent;
    PowerTableEdit(objTable.id);
}

//在表格中指定位置,插入元素
function addRow(oTable,rowIndex2Add,c)
{
    if (rowIndex2Add<0 || rowIndex2Add>oTable.rows.length)
        return;
    var currentCell;
    var newRow=oTable.insertRow(rowIndex2Add);
    for (var i=0;i<c.length;i++) 
    {
        //modified by liu_xc 2004.6.28
        //增加一条数据时，如果时select形式的编辑方式，则搜索sValue和sText
        //找到与输入值相符的value赋给td的data
        if(colStyle[i] == "sel")
        {
            //如果没有设置数据而直接添加，会在编辑方式为
            //select的td中添加选择框数据的第一项
            if(c[i] == "&nbsp;" || c[i] == "")
                c[i] = sText[i][0];
            currentCell=newRow.insertCell(i);
            currentCell.innerHTML= c[i];
            for(var j=0; j<sText[i].length; j++)
            {
                if(c[i] == sText[i][j])
                {
                    currentCell.data= sValue[i][j];
                }
            }
        }
        else
        {
            currentCell=newRow.insertCell(i);
            currentCell.innerHTML= c[i];
        }
        //modified by liu_xc 2004.6.28
        //增加一条数据时，如果时select形式的编辑方式，则搜索sValue和sText
        //找到与输入值相符的value赋给td的data
    }
}

//删除指定行
function delRow(oTable,nRowIndex2Del)
{
    //不删除标题行；指定行不在表格中也不执行删除；
    if (oTable.rows.length==1
          ||nRowIndex2Del==null
            ||nRowIndex2Del==0
              || nRowIndex2Del>=oTable.rows.length) 
        return;
    else
        oTable.deleteRow(nRowIndex2Del);
}

function MoveUp(oTable,nRowIndex2Move)
{
    //判断移动的行是否合法
    if(nRowIndex2Move==null 
        || nRowIndex2Move<=1
            || nRowIndex2Move>=oTable.rows.length)return;
            
    ChangeRow(oTable,nRowIndex2Move,--nRowIndex2Move);
}

//向下移动指定表格的行
function MoveDown(oTable,nRowIndex2Move)
{
    //判断移动的行是否合法
    if(nRowIndex2Move==null 
        || currentRowIndex==oTable.rows.length 
            || currentRowIndex==0)
        return;
            
    ChangeRow(oTable,nRowIndex2Move,++nRowIndex2Move);
}

//指定表单的两行互换
function ChangeRow(oTable,nRowIndex1,nRowIndex2)
{
    oTable.rows[nRowIndex1].swapNode(oTable.rows[nRowIndex2]);
}

//获取指定tag的元素 [逐级查找] 
function getElement(oElement,sTag)
{
    sTag = sTag.toLowerCase();
    if(oElement.tagName.toLowerCase()==sTag)
        return oElement;
    while(oElement=oElement.offsetParent)
    {
        if(oElement.tagName.toLowerCase()==sTag) 
            return oElement;
    }
    return(null);
}

function ClearColor(oTable,nCurRowIndex,oCurCell)
{
    //清除选中行表现
    if(nCurRowIndex!=null && nCurRowIndex != -1)
    {
        for(i=0;i<oTable.rows[nCurRowIndex].cells.length;i++)
        {
            with(oTable.rows[nCurRowIndex].cells[i])
            {
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    //清除可编辑表格
    if(oCurCell!=null)
    {
        if (oCurCell.children.length>0 )
        {
            if(oCurCell.children[0].tagName.toLowerCase() != "img"
                &&oCurCell.children[0].tagName.toLowerCase() != "a")
            {
                if(oCurCell.children[0].tagName.toLowerCase() == "input")
                    oCurCell.innerHTML=oCurCell.children[0].value.replaceHTML();
                else if(oCurCell.children[0].tagName.toLowerCase() == "select")
                    oCurCell.innerHTML=oCurCell.children[0].options[oCurCell.children[0].selectedIndex].text;
            }
        }
    }
}

//读取表格现有颜色
function ReadOrgColor(oTable)
{
    for(var i=0;i<oTable.rows.length;i++)
    {
        for(var j=0;j<oTable.rows[i].cells.length;j++)
        {
            with(oTable.rows[i])
            {
                cells[j].oBgc = "";
                cells[j].oFc  = "";
            }
        }
    }
}

function setEvenOddColor(mainTab)
{
    //增加奇偶行的css控制 奇行：tdOdd，偶行：tdEven
    for(var i=1; i<mainTab.rows.length; i++)
    {
        if(i%2 == 0)
            mainTab.rows[i].className = "TrEven";
        else
            mainTab.rows[i].className = "TrOdd";
    }
}

//根据在编辑框按键的不同而采取不同的动作
function judgeKeyToDo()
{
    //按键是tab
    if(event.keyCode == 9)
    {
        var cellN;
        if(currentCell.cellIndex == mainTab.rows[currentRowIndex].cells.length-1)
            cellN = -1;
        else
            cellN = currentCell.cellIndex;
        var nextCell = mainTab.rows[currentRowIndex].cells[cellN+1];        
        //如果下一个表格未指定编辑方式，跳过
        while(colStyle[parseInt(cellN+1)] == null)
        {
            cellN = cellN + 1; 
            nextCell = mainTab.rows[currentRowIndex].cells[cellN+1];
        }
        //如果编辑方式为txt
        if(colStyle[parseInt(cellN+1)] == 'txt')
        {
            if(currentCell.children.length>0)
            {
                if(currentCell.children[0].tagName.toLowerCase() == "input")
                    currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
                else if(currentCell.children[0].tagName.toLowerCase() == "select")
                    currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
            }
            editCell(mainTab,nextCell,'txt',true);
        }
        //如果编辑方式为select
        else if(colStyle[parseInt(cellN+1)] == 'sel')
        {
            if(currentCell.children.length>0)
            {
                if(currentCell.children[0].tagName.toLowerCase() == "input")
                    currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
                else if(currentCell.children[0].tagName.toLowerCase() == "select")
                    currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
            }
            editCell(mainTab,nextCell,'sel',true,sText[parseInt(cellN+1)],sValue[parseInt(cellN+1)]);
        }
        //设置当前表格为下一个单元格
        currentCell = nextCell;
        
        if(currentCell.children.length > 0)
        {
            if(currentCell.children[0].type == "select-one")
                setTimeout('currentCell.children[0].focus()',10);
            else
                setTimeout('currentCell.children[0].select()',10);
        }
    }
    //如果按键是enter
    if(event.keyCode == 13)
    {
        if(currentCell.children[0].tagName.toLowerCase() == "input")
            currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
        else if(currentCell.children[0].tagName.toLowerCase() == "select")
            currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
    }
}

String.prototype.replaceHTML = function()
{
    var result = this;
    result = result.replace(/&/g,"&amp;");
    result = result.replace(/</g,"&lt;");
    result = result.replace(/>/g,"&gt;");
    result = result.replace(/\s/g,"&nbsp;");
    if(result == "")
        result = "&nbsp;";
    return result;
}
/*********************************** powerTableEdit.js *********************************/
</script>
<script language="javascript">

function initTable()
{
    pt = new PowerTableEdit("table1");
    var arrText = new Array();
    arrText[0] = "数据一";
    arrText[1] = "数据二";
    arrText[2] = "数据三";
    arrText[3] = "数据四";
    var arrValue = new Array();
    arrValue[0] = "1";
    arrValue[1] = "2";
    arrValue[2] = "3";
    arrValue[3] = "4";
    
    pt.setCol(2,'txt');
    pt.setCol(3,'sel',arrText,arrValue);
    pt.setCol(4,'txt');
    pt.setCol(5,'txt');
    pt.setCol(6,'txt');
    pt.setCol(7,'txt');
}

function add()
{
    var arrDa = new Array();
    arrDa[0] = "&nbsp;";
    arrDa[1] = "九";
    arrDa[2] = "Tomcat";
    arrDa[3] = "数据四";
    arrDa[4] = "Ellise";
    arrDa[5] = "aaaa";
    arrDa[6] = "2.112.521";
    arrDa[7] = "美国";
    pt.setCellData(arrDa);
    add_row(mainTab);
}

//添加图标
function chanIcon()
{
    var oImg = new Image();
    oImg.src = "file.png";
    insertImg(oImg,'1');    
}

function chanIcon1()
{
    var oImg = new Image();
    oImg.src = "woman.jpg";
    insertImg(oImg,'2');
}

function chanIcon2()
{
    var oImg = new Image();
    oImg.src = "openfoldericon.png";
    insertImg(oImg,'3');
}
</script>
</head>

<body onLoad="initTable();">
<div class="divClass">
<table id=table1 cellSpacing=0 cellPadding=0 border=0 width="100%">
  <tr align=middle>
    <th width=2%>&nbsp;</th>
    <th width=13%>数字</th>
    <th width=15%>名称</th>
    <th width=15%>数据</th>
    <th width=15%>Engine</th>
    <th width=10%>字母</th>
    <th width=15%>Fastest Lap</th>
    <th width=15%>国家</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>1</td>
    <td>Schumacher</td>
    <td data="1">数据一</td>
    <td>Ferrari</td>
    <td>cccc</td>
    <td>1.15.872</td>
    <td>德国</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>2</td>
    <td>Barrichello</td>
    <td data="3">数据三</td>
    <td>Ferrari</td>
    <td>bbbb</td>
    <td>1.16.760</td>
    <td>法国</td>
  </tr>
  <tr >
    <td>&nbsp;</td>
    <td>3</td>
    <td>Raikkonen</td>
    <td data="2">数据二</td>
    <td>Petronas</td>
    <td>aaaa</td>
    <td>1.16.875</td>
    <td>缅甸&nbsp;</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>4</td>
    <td>Heidfeld</td>
    <td data="3">数据三</td>
    <td>Petronas</td>
    <td>aaaa</td>
    <td>1.17.165</td>
    <td>朝鲜</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>5</td>
    <td>Irvine</td>
    <td data="1">数据一</td>
    <td>Cosworth</td>
    <td>bbbb</td>
    <td>1.18.016</td>
    <td>中国</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>6</td>
    <td>asdasdasd</td>
    <td data="4">数据四</td>
    <td>Cosworth</td>
    <td>aaaa</td>
    <td>1.18.015</td>
    <td>俄罗斯</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>7</td>
    <td>Gengine</td>
    <td data="3">数据三</td>
    <td>Renault</td>
    <td>cccc</td>
    <td>1.15.015</td>
    <td>韩国</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>8</td>
    <td>Slap</td>
    <td data="2">数据二</td>
    <td>Renault</td>
    <td>bbbb</td>
    <td>1.15.012</td>
    <td>日本</td>
  </tr>  
</table>
</div>
<p>
<div style="background-color:#cccccc">
<input onclick=add() type=button value=添加一行>
<input onclick="del_row(mainTab);" type=button value=删除一行> 
<input id=moveUp onclick=Move_up(mainTab) type=button value=上移一行>
<input id=moveDown onclick=Move_down(mainTab) type=button value=下移一行>
<input onclick=res_tab(mainTab) type=button value=重置表格> 
<span style="font-size:12px">按tab键可以自动跳入下一个编辑单元格,enter结束编辑</span>
</div><br>
<div style="background-color:#cccccc">
<input type=button value='设置文件图标' onclick="chanIcon()"/>&nbsp;&nbsp;
<input type=button value='设置图片图标' onclick="chanIcon1()"/>&nbsp;&nbsp;
<input type=button value='设置文件夹图标' onclick="chanIcon2()"/>
</div><br>
<div style="background-color:#cccccc">
<input id=colNum size=2>&nbsp;<input type=button value='取列数据' onclick="alert(getColData(document.all.colNum.value))"/>&nbsp;&nbsp;
<input id=rowNum size=2>&nbsp;<input type=button value='取行数据' onclick="alert(getRowData(document.all.rowNum.value))"/>
</div><br>
</body>
</html>