有关js方面知识的整理
1、
框架大概是这样的
<frameset rows="*" cols="162,*">
<frame src="left.html" name="leftFrame" id="leftFrame" />
<frame src="main.html" name="mainFrame" id="mainFrame" />
</frameset>
window.parent.frames[‘leftFrame’]
window.parent.frames[‘mainFrame’]
document.frames["main"].contentWindow.document.getElementById('控件的ID');//获取iframe控件的值
父控件的值
window.parent.frames[""]
-------------------------------------------------------------------------------------------------------------------------------------
2、含有隐藏控件时 js如何判断隐藏的控件是否处于试用状态 是否需要进行验证
隐藏的控件：
<c:if test="${not empty error}">
<tr>
<td height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">文件路径</span></div></td>
<td height="20" bgcolor="#FFFFFF" class="STYLE6" ><div align="left">
<input type="text" name="Path" id="Path" size="35" value="<%=paths %>"/> <span style="color:red">* </span>
</td>
</tr>
</c:if>
判断隐藏的控件是否处于试用状态：
var mark = document.getElementsByName("Path"); 若mark.length <0则表示处于隐藏状态 目前没有使用
若mark.length>0则表示目前处于试用状态 需要对其进行是否为空的验证
------------------------------------------------------------------------------------------------------------------------------------
3、 含有隐藏控件时的 js判断是否为空的验证
var mark = document.getElementsByName("Path");
if(isNull("upStatus")&& mark.length <= 0){
alert("请先上传或者填写路径！");
return false;
}
if(mark.length>0){
if(isNull("name")){
alert("文件名为必填项！");
document.getElementById("name").focus();
return false;
}
}
------------------------------------------------------------------------------------------------------
4、js中表单的提交方式：
document.activityForm.action="activityAction.do?functionType=upLoadFile";
document.activityForm.submit(); ----其中的activityForm是表单的名称
原来el接收参数也可以用在js中啊：
document.fundsForm.action="fundsAction.do?functionType=fundsCheck&applicationID=${fundsForm.applicationID}&approveState=2";
-------------------------------------------------------------------------
JS 动态给表格增加/删除一行
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
newRow=listtable.insertRow(listtable.rows.length);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
}
function insertline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
if(listtable.rows[i].cells[9].id==lineid.id)
{
newRow=listtable.insertRow(i);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
return;
}
}
}
function delline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
for(j=0;j<listtable.rows[i].cells.length;j++)
{
if(listtable.rows[i].cells[j].id==lineid.id)
{
listtable.deleteRow(i);
return;
}
}
}
}
</script>
<body>
<table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
<tr align=center height=20>
<td bgcolor=#FFFFFF><b>品名</b></td>
<td bgcolor=#FFFFFF><b>材质</b></td>
<td bgcolor=#FFFFFF><b>规格</b></td>
<td bgcolor=#FFFFFF><b>价格</b></td>
<td bgcolor=#FFFFFF><b>数量</b></td>
<td bgcolor=#FFFFFF><b>产地</b></td>
<td bgcolor=#FFFFFF><b>交货地</b></td>
<td bgcolor=#FFFFFF><b>备注</b></td>
<td bgcolor=#FFFFFF><b>发布</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
</tr>
</table>
<table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><input type=button value=增加一行 onclick=addline()></td>
</tr>
</table>
</body>
</html>
动态增加表格的一行
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript">
function add( ) {
//在指定id的table中插入一行
var tb = document.getElementById("tab");
var rnum = tb.rows.length;//判断table有多少行
var nextrow = tb.insertRow(rnum);
//需要几列就插入列
textArea0 = nextrow.insertCell(0);
textArea1 = nextrow.insertCell(1);
textArea2 = nextrow.insertCell(2);
textArea3 = nextrow.insertCell(3);
textArea4 = nextrow.insertCell(4);
textArea5 = nextrow.insertCell(5);
rnum++;
rnum = rnum.toString();
var str = "<input type='text' name='textfield3' size='20' id='textbox"+rnum+"'/>";
var str1 = "<input type='text' name='textfield3' size='30' id='textbox"+rnum+"'/>";
textArea0.innerHTML =str;
textArea1.innerHTML =str1;
textArea2.innerHTML =str;
textArea3.innerHTML =str1;
textArea4.innerHTML =str1;
textArea5.innerHTML =str1;
}
</script>
</head>
<body>
<div align="center" class="STYLE1">
<p>在线报名表</p>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" id="tab" >
<tr>
<td height="39" width="96%" colspan="8" bgcolor="#d3eaef"><div align="center"><span class="STYLE3">
<textarea name="titles" id="titles"></textarea></span></div></td>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">单位名称：</span></div></td>
<td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield" type="text" size="30" />
</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">通讯地址：</span></div></td>
<td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield2" type="text" size="30" />
</span></div></td>
</tr>
<tr>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE6">电子邮箱：</span></div></td>
<td width="84%" colspan="7" bgcolor="#FFFFFF"><div align="left"><span class="STYLE6">
<input name="textfield2" type="text" size="30" />
</span></div></td>
</tr>
<tr >
<td width="24%" colspan="2" bgcolor="#d3eaef"><span class="STYLE3">联系人：</span></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">电话：</span></div></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">传真：</span></div></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">邮编：</span></div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<input name="textfield3" type="text" size="20" />
</td>
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
区号： <input name="textfield3" type="text" size="20" />
</span></div></td>
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
区号： <input name="textfield3" type="text" size="20" />
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield3" type="text" size="20" />
</span></div></td>
</tr>
<tr>
<td bgcolor="#d3eaef" colspan="8"><div align="left"><span class="STYLE3"><input type="button" name="name" id="name" onclick="add('tab')" value="新增编辑域"/></span></div></td>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">序号：</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">姓名:</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">性别：</span></div></td>
<td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">职务/职称</span></div></td>
<td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">工作单位</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">联系方式</span></div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="20" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="20" />
</span></div></td>
<td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
</tr>
</table>
</form>
<p> </p>
</div>
</body>
</html>
----------------------------------------------
6、 js控制显示的表单
function readonlytag(sec){
var appType=sec.value;
var tbl1 = document.getElementById("tbl1");
var tbl2 = document.getElementById("tbl2");
if(appType==0){
tbl1.style.display="block";
tbl2.style.display="none";
}
if(appType==0){
tbl1.style.display="none";
tbl2.style.display="block";
}
jsp内容：
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" >
<tr>
<td >申请类型</td>
<td><select name="appType" id="appType" onchange="readonlytag(this)">
<c:forEach items="${appTypeList}" var="code">
<option value="${code.codeNo}"> ${code.content}
</option>
</c:forEach>
</select>
</td>
</tr>
</table>
<table style="display:block" id="tbl1" ></table>
<table style="display:block" id="tbl2"></table>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
newRow=listtable.insertRow(listtable.rows.length);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
}
function insertline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
if(listtable.rows[i].cells[9].id==lineid.id)
{
newRow=listtable.insertRow(i);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
return;
}
}
}
function delline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
for(j=0;j<listtable.rows[i].cells.length;j++)
{
if(listtable.rows[i].cells[j].id==lineid.id)
{
listtable.deleteRow(i);
return;
}
}
}
}
</script>
<body>
<table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
<tr align=center height=20>
<td bgcolor=#FFFFFF><b>品名</b></td>
<td bgcolor=#FFFFFF><b>材质</b></td>
<td bgcolor=#FFFFFF><b>规格</b></td>
<td bgcolor=#FFFFFF><b>价格</b></td>
<td bgcolor=#FFFFFF><b>数量</b></td>
<td bgcolor=#FFFFFF><b>产地</b></td>
<td bgcolor=#FFFFFF><b>交货地</b></td>
<td bgcolor=#FFFFFF><b>备注</b></td>
<td bgcolor=#FFFFFF><b>发布</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
</tr>
</table>
<table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><input type=button value=增加一行 onclick=addline()></td>
</tr>
</table>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript">
function add( ) {
//在指定id的table中插入一行
var tb = document.getElementById("tab");
var rnum = tb.rows.length;//判断table有多少行
//需要几列就插入列
textArea0 = nextrow.insertCell(0);
textArea1 = nextrow.insertCell(1);
textArea2 = nextrow.insertCell(2);
textArea3 = nextrow.insertCell(3);
textArea4 = nextrow.insertCell(4);
textArea5 = nextrow.insertCell(5);
rnum++;
rnum = rnum.toString();
var str = "<input type='text' name='textfield3' size='20' id='textbox"+rnum+"'/>";
var str1 = "<input type='text' name='textfield3' size='30' id='textbox"+rnum+"'/>";
textArea0.innerHTML =str;
textArea1.innerHTML =str1;
textArea2.innerHTML =str;
textArea3.innerHTML =str1;
textArea4.innerHTML =str1;
textArea5.innerHTML =str1;
}
</head>
<body>
<div align="center" class="STYLE1">
<p>在线报名表</p>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" id="tab" >
<tr>
<td height="39" width="96%" colspan="8" bgcolor="#d3eaef"><div align="center"><span class="STYLE3">
<textarea name="titles" id="titles"></textarea></span></div></td>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">单位名称：</span></div></td>
<td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield" type="text" size="30" />
</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">通讯地址：</span></div></td>
<td width="36%" colspan="3" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield2" type="text" size="30" />
</span></div></td>
</tr>
<tr>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE6">电子邮箱：</span></div></td>
<td width="84%" colspan="7" bgcolor="#FFFFFF"><div align="left"><span class="STYLE6">
<input name="textfield2" type="text" size="30" />
</span></div></td>
</tr>
<tr >
<td width="24%" colspan="2" bgcolor="#d3eaef"><span class="STYLE3">联系人：</span></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">电话：</span></div></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">传真：</span></div></td>
<td width="24%" colspan="2" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">邮编：</span></div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<input name="textfield3" type="text" size="20" />
</td>
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
区号： <input name="textfield3" type="text" size="20" />
</span></div></td>
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
区号： <input name="textfield3" type="text" size="20" />
<td colspan="2" bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield3" type="text" size="20" />
</span></div></td>
</tr>
<tr>
<td bgcolor="#d3eaef" colspan="8"><div align="left"><span class="STYLE3"><input type="button" name="name" id="name" onclick="add('tab')" value="新增编辑域"/></span></div></td>
</tr>
<tr>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">序号：</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">姓名:</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">性别：</span></div></td>
<td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">职务/职称</span></div></td>
<td width="24%" bgcolor="#d3eaef" colspan="2"><div align="left"><span class="STYLE3">工作单位</span></div></td>
<td width="12%" bgcolor="#d3eaef"><div align="left"><span class="STYLE3">联系方式</span></div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="20" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="20" />
</span></div></td>
<td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF" colspan="2"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
<td bgcolor="#FFFFFF"><div align="left"><span class="STYLE3">
<input name="textfield54" type="text" size="30" />
</span></div></td>
</tr>
</table>
</form>
<p> </p>
</div>
</body>
</html>
----------------------------------------------
var tbl1 = document.getElementById("tbl1");
var tbl2 = document.getElementById("tbl2");
tbl1.style.display="block";
tbl2.style.display="none";
tbl1.style.display="none";
tbl2.style.display="block";
<td >申请类型</td>
<td><select name="appType" id="appType" onchange="readonlytag(this)">
<c:forEach items="${appTypeList}" var="code">
<option value="${code.codeNo}"> ${code.content}
</option>
</c:forEach>
</select>
</td>
</tr>
</table>