table中动态显示隐藏行,且在多种浏览器中支持
?效果,如下图:
?
html代码如下:
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<br>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" valign='top' class='content' align="left">
????<div id="loginborder">
????<form? action="<foundation:root/>j_security_check.check" method="post">
?????<input type="hidden" name="_eosFlowAction" value="login">
?????<table align="center" border="0" width="100%">
??????<tr><td colspan="3" style="text-align:left"><label><input type="radio" name="radio" id="pecard_password" value="pecard_password" checked="checked" onclick="on_pecardpassword()"/><font size=2>平台密码</font></label> <label><input type="radio" name="radio" id="messagecode" value="messagecode" onclick="on_messagecode()"/><font size=2>短信密码</font></label><p></td></tr>
??????<tr>
???????<td>用户名:</td>
???????<td colspan="2"><input type="text" id="j_username" name="j_username"></td>
???????<td><font style="color:red">
??????? </font></td>
??????</tr>
??????
??????<tbody id="pecardpassword_tbody">
??????<tr>
???????<td>密 码:</td>
???????<td colspan="2"><input type="password" id="j_password" name="j_password"></td>
???????<td><font id="mypassword" style="color:red">
??????? </font></td>
??????</tr>
??????</tbody>
??????
??????<tbody id="messagecode_tbody" style="display:none;">
??????<tr>
???????<td style="width:50px">密 码:</td>
???????<td style="width:80px"><input type="password" id="j_password_messagecode" name="j_password_messagecode"></td>
???????<td style="width:80px;text-align:left;"><a href="#" onclick="messageCode()"><font size="2" color="green">短信密码</font></a></td>
???????<td><font id="mypassword" style="color:red">
??????? </font></td>
??????</tr>
??????</tbody>
??????
??????<tr>
???????<td style="width:50px">验证码:</td>
???????<td style="width:80px"><input type="text" id="j_captcha_response" name="j_captcha_response"></td>
???????<td style="width:80px;text-align:left;"><img src="<foundation:root/>captchaImageServlet" width="80" height="25"? onclick="javascript:this.src=sys.basePath+'captchaImageServlet?e='+new Date()" /></td>
???????<td><font id="myimg" style="color:red">
??????? </font></td>
??????</tr>
??????
??????<tr>
???????<td> </td>
????????? <td align="left" >
??????????? <input type="button" value="登 录" onclick="javascript:onlogin2();">
????????? </td>
????????? <td colspan="2" align="left">
????????? ?<a href="#" onClick="javascript:lossPwd();">忘记密码?</a>
????????? </td>
??????</tr>
??????
??????<tr>
???????<td colspan="2"><input type="hidden" id="loginType" name="loginType" value=""></td>
??????</tr>
?????</table>
????</form>
????</div>
????</td>
???</tr>
??</table>
??</td>
?</tr>
</table>
</div>
<script type="text/javascript">
?//平台密码页面显示
?function on_pecardpassword(){
??document.getElementById('pecardpassword_tbody').style.display="";//显示
??document.getElementById('messagecode_tbody').style.display='none'//隐藏
??password = new Ext.form.TextField({applyTo:'j_password',width:160,inputType: 'password',allowBlank:true});
?}
?
?//短信密码页面显示
?function on_messagecode(){
??document.getElementById('messagecode_tbody').style.display="";//显示
??document.getElementById('pecardpassword_tbody').style.display='none'//隐藏
??password = new Ext.form.TextField({applyTo:'j_password_messagecode',width:80,inputType: 'password',allowBlank:true});
?}
</script>
</body>
注意:tbody显示用style="",能得到多种浏览器支持,而不是用style="display:block;",如果用了它之后,能在IE中正常显示,如果在火狐、google浏览器中显示错乱。