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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JavaScript门面模式详解
Oct 19 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JS定义函数的几种常用方法小结
May 23 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python Queue模块详解
2014/11/30 Python
Python做文本按行去重的实现方法
2016/10/19 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python在协程中增加任务实例操作
2021/02/28 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
今日说法观后感
2015/06/08 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL