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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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
中国收音机工业发展史
2021/03/02 无线电
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Django 路由控制的实现代码
2018/11/08 Python
解析Python的缩进规则的使用
2019/01/16 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
ktv中秋节活动方案
2014/01/30 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
分公司经理任命书
2014/06/05 职场文书
买房协议书范本
2014/10/23 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
nginx里的rewrite跳转的实现
2021/03/31 Servers
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang