通过JS,选取radio时显示/隐藏table的功能
来源:互联网 发布:php socket 视频教程 编辑:程序博客网 时间:2024/06/07 00:18
<html><head><meta http-equiv="content-type" content="text/html ; charset=utf-8"/><script language="javascript">function selType(value){//window.alert("你点钟"+value);if(value=='jisuan'){table1.style.display="block";table2.style.display="none";table3.style.display="none";}else if(value=='jux'){table2.style.display="block";table1.style.display="none";table3.style.display="none";}else if(value=='area'){//window.alert("OK");table3.style.display="block";table1.style.display="none";table2.style.display="none";}}</script></head><body><form action="funcjsq.php" method="post"><input type="radio" name="sel" value="aa" onclick="selType('jisuan')">四则运算<input type="radio" name="sel" value="bb" onclick="selType('jux')">计算矩形<input type="radio" name="sel" value="cc" onclick="selType('area')">计算圆形<table id="table1" style="display:block" border="1px" bgcolor="#006699" ><tr><td>第一个数</td><td><input type="text" name="num1" ></td></tr><tr><td>第二个数</td><td><input type="text" name="num2"></td></tr><tr><td colspan="2"><select name="oper"><option>+</option><option>-</option><option>*</option><option>\</option></select></td></tr><tr ><td colspan="2"><input type="submit" value="计算结果" color="red"></td></tr></table><table id="table2" style="display:none" border="1px" bgcolor="#00cc33"/><tr><td>长</td><td><input type="text" name="side1"></td><tr><tr><td>宽</td><td><input type="text" name="side2"></td><tr><tr><td colspan="2"><input type="submit" value="计算结果" name="jux"></td></tr></table><table id="table3" style="display:none" bgcolor="#999933"><tr><td>半径</td><td><input type="text" name="radius"></td></tr><tr><td><input type="submit" value="圆面积" name="area"/></td></tr></table></form></body></html>
点击四则运算 矩形面积 圆面积 三个选项可以通过一段JS代码来实现这种效果,代码如上所示。
各个table之间通过一个ID号来区分 radio可以通过添加一个onclick事件selType()传递一个值,在JS中判断值是多少,从而来识别该打开哪个table
如果想达到上图显示的效果还需要将display:none 值改变,可以通过table1.style.display=" block/none"来改变表单是否显示出来是否显示。
对于表单的隐藏域
<form action="" method="post">
<input type="hideen" name='"doing" value=" ">//通过doing来区分按下计算时 是执行的哪个table
.....................................................................
</form>
<html><head><meta http-equiv="content-type" content="text/html ; charset=utf-8"/><script></script></head><body><form action="funcjsq.php" method="post"><table border="1px" bgcolor="#006699"><h3>四则运算</h3>第一个数<input type="text" name="num1"/><br/><br/>第二个数<input type="text" name="num2"/><br/>运算符号:<select name="oper"><option>+</option><option>-</option><option>*</option><option>\</option></select><br/><input type="hidden" name="doing" value="jisuan"/><input type="submit" value="计算结果"/></form><form action="funcjsq.php" method="post"><h3>计算圆形面积</h3>请输入半径:<input type="text" name="radius"/><br/><br/>计算结果:<input type="submit" value="面积"/><input type="hidden" name="doing" value="area"/></form></body></html>
- 通过JS,选取radio时显示/隐藏table的功能
- 通过radio 显示和隐藏
- 前端单选按钮radio的显示隐藏以及JS重置功能
- 隐藏table js功能
- js控制隐藏或显示table的某一行
- js显示隐藏 table 的行和列
- Search Table 隐藏和显示功能实现!
- 利用JavaScript通过单选框radio控制div的显示和隐藏
- JQ简单的radio切换显示、隐藏
- JQuery通过radio,select改变隐藏显示div
- 微信小程序开发之radio实现显示和隐藏功能
- table 的隐藏和显示
- JS控制table显示或隐藏
- JS控制table显示或隐藏
- 通过JS更改Option的隐藏于显示
- js和jq分别实现点击显示隐藏的功能
- AngularJS 中,通过 radio来控制元素的显示和隐藏,以及控制表单元素的 disabled
- 通过js隐藏或者显示一个DIV
- 创业公司开发资源整理(迭代中)
- hdu2509 Be the Winner (尼姆博弈)
- Oracle、PostgreSQL、Sybase数据库导入导出命令说明和示例
- SQLite介绍
- Occur "libcap.so.1: cannot open shared object file" during Install 11g GI when running root.sh
- 通过JS,选取radio时显示/隐藏table的功能
- hdu 4696 反状态压缩+动态规划
- matlab:imfill学习
- Android记录2--制作表格样式+由下往上动画弹出效果实现
- ExtJs(一)
- VIM使用技巧(转)
- ubuntu 10.04下的配置tftp服务器
- android 随手记--播放铃声
- zoj 3088 Easter Holidays (SPFA 求最长路 最短路 + 打印路径)