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,jquery闭包概念分析
Jun 19 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序位置授权处理方法
2019/06/13 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python 爬取疫情数据的源码
2020/02/09 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015公司年度工作总结
2015/05/14 职场文书
道士塔读书笔记
2015/06/30 职场文书
获奖感言范文
2015/07/31 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android