`

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

    博客分类:
  • Html
阅读更多

 效果,如下图:



 

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 选择隐藏列

    在IT行业中,尤其是在Web开发领域,表格(Table)是一种常用的数据展示方式。有时,我们可能需要根据需求隐藏或显示表格中的某些列。本篇将详细探讨如何实现“table选择隐藏列”的功能,以及相关的源码解析和工具...

    多浏览器日历控件

    对于多浏览器兼容性,开发者需要在各种目标环境中进行广泛的测试,使用工具如BrowserStack或Sauce Labs,确保在所有支持的浏览器中表现一致。 综上所述,"多浏览器日历控件"是一个结合了JavaScript编程、浏览器...

    Table切换功能.rar

    在网页设计中,表格(Table)是展示数据的常用元素,尤其在数据分析、报表展示等领域。"Table切换功能"指的是通过交互方式改变表格显示的内容或样式,以满足不同场景下的需求。这种功能常见于数据量大或者有多种展示...

    bootstrap及bootstrap-table

    1. **数据源**:bootstrap-table可以从JSON、CSV、XML等多种数据格式加载数据,并支持异步加载,方便与后端服务器进行交互。 2. **列设置**:开发者可以自定义列的显示方式,包括宽度、隐藏、排序规则等,还可以...

    网的效果Style中的Display用法.pdf

    这对于隐藏某些内容或者在动态页面中实现显示/隐藏功能非常有用。 2. `display: block` `block`值是块级元素的默认值,如`&lt;div&gt;`、`&lt;p&gt;`等。设置`display: block`会使元素独占一行,宽度默认占据父元素的全部宽度...

    有关CSS定位、隐藏的案例分享

    在`显示隐藏遮罩案例.html`中,很可能利用JavaScript配合CSS的`display`属性,当用户触发特定事件(如点击按钮)时,显示或隐藏遮罩层。 四、图片处理 `images`目录可能包含了案例中用到的图片资源,对于CSS定位来...

    JSP参数列表 帮你提高基础知识水平

    需要注意的是,不同的浏览器可能对某些CSS属性的支持程度不同,因此在实际开发中应考虑浏览器兼容性问题。例如,如描述中提到的,IE5.5仅支持CSS1的`display`参数。随着技术的发展,现代浏览器对CSS2、CSS3的特性...

    treetable-很实用的树形表格带demo演示,IE模式.rar

    每个表格行都可以展开或折叠,以显示或隐藏其子项,这为用户提供了更直观的浏览体验。 在压缩包中,"treetable-很实用的树形表格带demo演示"部分包含了一个实际运行的示例,开发者可以借此了解树形表格的实现原理和...

    js操作iframe的一些知识

    动态显示或隐藏Iframe中的表格列 有时候我们需要根据用户的操作动态地显示或隐藏表格中的某列,这可以通过编写一个通用函数来实现: ```javascript function setHiddenOrShowCol(oTable, iCol, type) { for (let...

    table高级应用把表格进行到底(必看)

    这主要是因为不同浏览器对于CSS的支持存在差异,有时需要使用浏览器特定的CSS前缀,或者是需要额外的JavaScript脚本来确保在各个浏览器中能够呈现一致的页面效果。而对于table布局,由于其本身更为基础,因此兼容性...

    硕正轻量级富Web应用套件–硕正报表主要指标及功能清单.docx

    硕正报表支持多种主流浏览器,包括Chrome、IE(包括64位)、Firefox,同时也兼容国产浏览器如360极速浏览器、360安全浏览器、猎豹、百度、搜狗等。此外,该套件可在Windows、Linux、Unix等操作系统上运行。 2. **...

    2012年职称计算机之Dreamweaver经典模拟试题及答案解析.pdf

    6. 表格操作:在代码视图中直接修改`&lt;table&gt;`标签的行数和列数是无效的,需使用设计视图或属性面板进行修改。 7. CSS优点:CSS的优点包括样式分离、易于维护、样式继承等,但不能用于客户端编程以创建动态效果。 8...

    asp读取数据库中数据生成统计折线图

    在ASP(Active Server Pages)开发中,生成统计折线图是一项常见的需求,它可以帮助我们以图形化的方式直观地展示从数据库中获取的数据。这通常涉及到以下几个关键知识点: 1. **ASP基础**:ASP是微软开发的一种...

    js-Excel及弹出层

    首先,关于“js操作Excel”,JavaScript通常不直接支持与Excel文件进行交互,因为它运行在浏览器环境中,无法访问本地文件系统。然而,通过一些库和API,我们可以实现类似的功能。例如,`xlsx`库是一个流行的...

    jQuery树型表格jquery-treetable

    - 兼容性测试:确保在目标浏览器上能够正常工作,因为不同的浏览器可能对某些CSS或JavaScript特性支持不同。 - 错误处理:编写错误处理代码,以应对可能出现的异常情况。 6. **相关资源**: - 说明文件"说明....

    dhtmlxTreeGrid

    1. **表格树结构**:dhtmlxTreeGrid的独特之处在于其将表格与树形视图相结合,每一行都可以展开或折叠,显示或隐藏子级数据,这样可以清晰地展示数据间的层级关系,对于有组织结构的数据展示非常实用。 2. **数据...

    YCalendar 漂亮的JS日历控件实现代码.zip

    3. **自定义配置**:YCalendar还支持多种自定义配置,如颜色主题、显示模式(单月、双月)、日期范围限制等。开发者可以通过设置参数来调整日历控件的行为,满足不同应用场景的需求。 4. **兼容性与性能优化**:...

Global site tag (gtag.js) - Google Analytics