table中动态显示隐藏行，且在多种浏览器中支持

最新推荐文章于 2022-02-09 16:04:52 发布

iteye_13498

最新推荐文章于 2022-02-09 16:04:52 发布

阅读量442

点赞数

分类专栏： Html 文章标签： table中动态显示隐藏行且在多种浏览器中支持

本文链接：https://blog.csdn.net/iteye_13498/article/details/82475676

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果，如下图：

html代码如下：

<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" οnclick="on_pecardpassword()"/><font size=2>平台密码</font></label>    <label><input type="radio" name="radio" id="messagecode" value="messagecode" οnclick="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="#" οnclick="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" οnclick="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="登录" οnclick="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浏览器中显示错乱。

iteye_13498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table中动态显示隐藏行，且在多种浏览器中支持

效果，如下图： html代码如下：&lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;div align="center"&gt;&lt;br&gt;&lt;br&gt;&lt;br
复制链接

扫一扫

专栏目录