js控制TR的显示隐藏


Posted in Javascript onMarch 04, 2016

下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码。注意:ready方法必须要引用jquery的库。

1.html Code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  .div1{ width:300px; height:80px; border:1px solid green;}
  .div2{ width:300px; height:80px; border:1px solid red;}
</style>
<SCRIPT language=javascript type=text/javascript src="jquery-1.7.2.min.js"></SCRIPT>
<script type="text/javascript">
  function setDetailMsgRow(rowID,sel) {
    var row = document.getElementById(rowID); 
      if (row != null) { 
        if (sel.value == 1) { 
          row.style.display = "block";
        } 
        else { 
           row.style.display = "none"; 
        } 
    } 
  } 
  /*自动加载隐藏框,ready方法必须要引用jquery的库*/
  $(document).ready(function(){ 
var sel = document.getElementById('selID');
    setDetailMsgRow('show',sel);
  });
  function onload() {var sel = document.getElementById('selID');
    setDetailMsgRow('show',sel); 
  } 
</script>
</head>
<body>
<TABLE border="1" cellpadding="2" cellspacing="0">
<TBODY>
<TR>
<TD>是否填写身高体重</TD>
<TD><SELECT width='100%' id=selID onchange = "setDetailMsgRow('show',this)">
  <OPTION value="1" selected>是</OPTION>
  <OPTION value="0">否</OPTION>
  <OPTION ></OPTION>
  </SELECT>
</TD><TD></TD><TD></TD></TR>
<TR id=show style="display:none;">
<TD>身高</TD>
<TD><INPUT id=Height></TD>
<TD>体重</TD>
<TD><INPUT id=Weight></TD></TR>
</TBODY>
</TABLE>
</body>
</html>

网上可以下载jquery-1.7.2.min.js将其引入。
2.效果

js控制TR的显示隐藏

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
js实现百度搜索提示框
Feb 05 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
Nuxt.js实战和配置详解
Aug 05 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
Node.js操作Firebird数据库教程
Mar 04 #Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 #Javascript
node.js微信公众平台开发教程
Mar 04 #Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 #Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 #Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 #Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 #Javascript
You might like
PHP中创建并处理图象
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python监控文件或目录变化
2016/06/07 Python
python getopt详解及简单实例
2016/12/30 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
业务部经理岗位职责
2014/01/04 职场文书
年度考核评语
2014/01/19 职场文书
高三体育教学反思
2014/01/29 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
实习生求职自荐信
2014/02/07 职场文书
父母对孩子的寄语
2014/04/09 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
会议接待欢迎标语
2014/10/08 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android