效果,如下图:
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> <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浏览器中显示错乱。
相关推荐
在IT行业中,尤其是在Web开发领域,表格(Table)是一种常用的数据展示方式。有时,我们可能需要根据需求隐藏或显示表格中的某些列。本篇将详细探讨如何实现“table选择隐藏列”的功能,以及相关的源码解析和工具...
对于多浏览器兼容性,开发者需要在各种目标环境中进行广泛的测试,使用工具如BrowserStack或Sauce Labs,确保在所有支持的浏览器中表现一致。 综上所述,"多浏览器日历控件"是一个结合了JavaScript编程、浏览器...
在网页设计中,表格(Table)是展示数据的常用元素,尤其在数据分析、报表展示等领域。"Table切换功能"指的是通过交互方式改变表格显示的内容或样式,以满足不同场景下的需求。这种功能常见于数据量大或者有多种展示...
1. **数据源**:bootstrap-table可以从JSON、CSV、XML等多种数据格式加载数据,并支持异步加载,方便与后端服务器进行交互。 2. **列设置**:开发者可以自定义列的显示方式,包括宽度、隐藏、排序规则等,还可以...
这对于隐藏某些内容或者在动态页面中实现显示/隐藏功能非常有用。 2. `display: block` `block`值是块级元素的默认值,如`<div>`、`<p>`等。设置`display: block`会使元素独占一行,宽度默认占据父元素的全部宽度...
在`显示隐藏遮罩案例.html`中,很可能利用JavaScript配合CSS的`display`属性,当用户触发特定事件(如点击按钮)时,显示或隐藏遮罩层。 四、图片处理 `images`目录可能包含了案例中用到的图片资源,对于CSS定位来...
需要注意的是,不同的浏览器可能对某些CSS属性的支持程度不同,因此在实际开发中应考虑浏览器兼容性问题。例如,如描述中提到的,IE5.5仅支持CSS1的`display`参数。随着技术的发展,现代浏览器对CSS2、CSS3的特性...
每个表格行都可以展开或折叠,以显示或隐藏其子项,这为用户提供了更直观的浏览体验。 在压缩包中,"treetable-很实用的树形表格带demo演示"部分包含了一个实际运行的示例,开发者可以借此了解树形表格的实现原理和...
动态显示或隐藏Iframe中的表格列 有时候我们需要根据用户的操作动态地显示或隐藏表格中的某列,这可以通过编写一个通用函数来实现: ```javascript function setHiddenOrShowCol(oTable, iCol, type) { for (let...
这主要是因为不同浏览器对于CSS的支持存在差异,有时需要使用浏览器特定的CSS前缀,或者是需要额外的JavaScript脚本来确保在各个浏览器中能够呈现一致的页面效果。而对于table布局,由于其本身更为基础,因此兼容性...
硕正报表支持多种主流浏览器,包括Chrome、IE(包括64位)、Firefox,同时也兼容国产浏览器如360极速浏览器、360安全浏览器、猎豹、百度、搜狗等。此外,该套件可在Windows、Linux、Unix等操作系统上运行。 2. **...
6. 表格操作:在代码视图中直接修改`<table>`标签的行数和列数是无效的,需使用设计视图或属性面板进行修改。 7. CSS优点:CSS的优点包括样式分离、易于维护、样式继承等,但不能用于客户端编程以创建动态效果。 8...
在ASP(Active Server Pages)开发中,生成统计折线图是一项常见的需求,它可以帮助我们以图形化的方式直观地展示从数据库中获取的数据。这通常涉及到以下几个关键知识点: 1. **ASP基础**:ASP是微软开发的一种...
首先,关于“js操作Excel”,JavaScript通常不直接支持与Excel文件进行交互,因为它运行在浏览器环境中,无法访问本地文件系统。然而,通过一些库和API,我们可以实现类似的功能。例如,`xlsx`库是一个流行的...
- 兼容性测试:确保在目标浏览器上能够正常工作,因为不同的浏览器可能对某些CSS或JavaScript特性支持不同。 - 错误处理:编写错误处理代码,以应对可能出现的异常情况。 6. **相关资源**: - 说明文件"说明....
1. **表格树结构**:dhtmlxTreeGrid的独特之处在于其将表格与树形视图相结合,每一行都可以展开或折叠,显示或隐藏子级数据,这样可以清晰地展示数据间的层级关系,对于有组织结构的数据展示非常实用。 2. **数据...
3. **自定义配置**:YCalendar还支持多种自定义配置,如颜色主题、显示模式(单月、双月)、日期范围限制等。开发者可以通过设置参数来调整日历控件的行为,满足不同应用场景的需求。 4. **兼容性与性能优化**:...