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" class="centertable">
 <tr>
  <td>
  <table border='0' cellspacing='0' cellpadding='0' width="">
   <tr>
    <td width='729' height="413" 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>&nbsp;&nbsp;&nbsp;&nbsp;<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">
       &nbsp;</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">
       &nbsp;</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">
       &nbsp;</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">
       &nbsp;</font></td>
      </tr>
      
      <tr>
       <td>&nbsp;</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浏览器中显示错乱。

你可能感兴趣的:(table中动态显示隐藏行,且在多种浏览器中支持)