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

rj0801zxh

浏览: 282000 次
性别:
来自: 湖南

最近访客更多访客>>

liaojiyong

u011130870

lic0112

zs245584910

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html

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

效果，如下图：

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" 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浏览器中显示错乱。

分享到：

js随机生成N位数字(0到9) | MyEclipse中安装反编译插件

2013-01-29 16:14
浏览 4297
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论