表单鼠标掠过特效
<table id="TbSort" class="Listing" width=100% align=center>
<tbody id="todoList">
<TR>
<TH>Col1</TH>
<TH>Col2</TH>
<TH>Col3</TH>
<TH>Col4</TH>
<TH>Col5</TH>
<TH>Col6</TH>
</TR>
<%
for(int i=0;i<10;i++){
out.print("<tr onmouseover=\"this.style.backgroundColor='#dddddd'\" onmouseout=\"this.style.backgroundColor='#f5f5f5'\">");
out.print("<td>"+i+"</td>");
out.print("<td>"+i*2+"</td>");
out.print("<td>"+i*3+"</td>");
out.print("<td>"+i*4+"</td>");
out.print("<td>"+i*5+"</td>");
out.print("<td>"+i*6+"</td>");
out.print("</tr>");
}
%>
</tbody>
</table>
数字大小变换特效
<table border=0 width=100% align="center">
<tr><td align="center">
<%
for(int i=0;i<10;i++){
out.print("<span class='mouseout' onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\">");
out.print(" "+i+" ");
out.print("</span>");
}
%>
</td></tr>
</table>
表单字段随焦点变色特效
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
<table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
<tr bgcolor="#eaecf5" height="25">
<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 请填入你的个人信息</b></td>
</tr>
<tr bgcolor=#236d78 height=1><td></td></tr>
<tr bgcolor=#eaecf5 >
<td bgcolor=#ffffff>
<!-- 内置表格，居中,比外表格窄， -->
<table width=560 align=center border=0>
<tbody>
<tr>
<td width=70>卡号:</td>
<td><input type="text" name="code" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>姓名:</td>
<td><input type="text" name="name" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>密码:</td>
<td><input type="password" name="password" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>邮件:</td>
<td><input type="text" name="email" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr>
<td width=70>地址:</td>
<td><input type="text" name="address" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr valign="top">
<td>介绍:</td>
<td valign="top"><textarea name="intro" rows="10" cols="30" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/></td>
</tr>
</tbody>
</table>
<!-- 内置表格结束-->
</td>
</tr>
</table>
<!-- 外层表格结束 -->
表单点击特效
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
<table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
<tr bgcolor="#eaecf5" height="25">
<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 表单点击特效</b></td>
</tr>
<tr bgcolor=#236d78 height=1><td></td></tr>
<tr bgcolor=#eaecf5 >
<td bgcolor=#ffffff>
<!-- 内置表格，居中,比外表格窄， -->
<table width=560 align=center border=0>
<tbody>
<tr>
<td width=70>自动全选:</td>
<td><input type="text" name="code" value="2606" onfocus="this.select()"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>禁止粘贴:</td>
<td><input type="text" name="name" onpaste="return false"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>关闭输入法:</td>
<td><input type="text" name="email" style="ime-mode:disabled"/></td>
</tr>
<tr valign="top">
<td>去掉默认的介绍性文字:</td>
<td valign="top"><textarea name="intro" rows="10" cols="30" onfocus="if(value=='请输入个人简介'){value=''}" onblur="if(value==''){value='请输入个人简介'}"/>请输入个人简介</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/></td>
</tr>
</tbody>
</table>
<!-- 内置表格结束-->
</td>
</tr>
</table>
<!-- 外层表格结束 -->
按回车键切换表单字段焦点
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
<table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
<tr bgcolor="#eaecf5" height="25">
<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 按回车切换焦点</b></td>
</tr>
<tr bgcolor=#236d78 height=1><td></td></tr>
<tr bgcolor=#eaecf5 >
<td bgcolor=#ffffff>
<!-- 内置表格，居中,比外表格窄， -->
<table width=560 align=center border=0>
<tbody>
<tr>
<td width=70>卡号:</td>
<td><input type="text" name="code" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>姓名:</td>
<td><input type="text" name="name" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>密码:</td>
<td><input type="password" name="password" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>邮件:</td>
<td><input type="text" name="email" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr>
<td width=70>地址:</td>
<td><input type="text" name="address" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr valign="top">
<td>介绍:</td>
<td valign="top"><textarea name="intro" rows="10" cols="30" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/></td>
</tr>
</tbody>
</table>
<!-- 内置表格结束-->
</td>
</tr>
</table>
<!-- 外层表格结束 -->
按上下键切换表单字段焦点
页面代码：
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
<table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
<tr bgcolor="#eaecf5" height="25">
<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 按上下键切换表单字段焦点</b></td>
</tr>
<tr bgcolor=#236d78 height=1><td></td></tr>
<tr bgcolor=#eaecf5 >
<td bgcolor=#ffffff>
<!-- 内置表格，居中,比外表格窄， -->
<table width=560 align=center border=0>
<tbody>
<tr>
<td width=70>卡号:</td>
<td><input type="text" name="code" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>姓名:</td>
<td><input type="text" name="name" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>密码:</td>
<td><input type="text" name="password" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red> (必填)</font></td>
</tr>
<tr>
<td width=70>邮件:</td>
<td><input type="text" name="email" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr>
<td width=70>地址:</td>
<td><input type="text" name="address" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
</tr>
<tr valign="top">
<td>介绍:</td>
<td valign="top"><textarea name="intro" rows="10" cols="30" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/></td>
</tr>
</tbody>
</table>
<!-- 内置表格结束-->
</td>
</tr>
</table>
<!-- 外层表格结束 -->
JS代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeFocusOnKey(obj,event){
// 取得表单域所在表单
var vform=obj.form;
// 取得当前表单域的下标
var index;
for(var i=0;i<vform.length;i++){
if(vform[i].name==obj.name){
index=i;
}
}
if(event.keyCode==38){
// 按向上键减少Index
index=index-1;
}
else if(event.keyCode==40){
// 按向下键增加Index
index=index+1;;
}
// 如果index在表单控件数组区间内 则转换焦点，vform.length-1是为了跳过按钮
if(index>-1 && index<vform.length-1){
vform[index].focus();
}
}
//-->
</SCRIPT>
下拉列表框二级联动示例
页面：
<table width=560 align=center border=0>
<tbody>
<tr>
<td width=70>国家:</td>
<td>
<select name="nations" onchange="changeCities(this)">
<option value="0">中国</option>
<option value="1">美国</option>
<option value="2">俄罗斯</option>
<option value="3">日本</option>
</select>
</td>
</tr>
<tr>
<td width=70>城市:</td>
<td>
<select name="cities" onchange="getCity(this)">
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/></