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脚本实现Web页面信息交互
Oct 11 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
javascript实现移动端上传图片功能
Aug 18 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 mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python动态性强类型用法实例
2015/05/09 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python星号*与**用法分析
2018/02/02 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python中删除某个元素的方法解析
2019/11/05 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Sql面试题
2013/03/20 面试题
2014年会演讲稿范文
2014/01/06 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
教师远程培训感言
2014/03/06 职场文书
产品质量承诺范本
2014/03/31 职场文书
特教教师先进事迹
2014/05/21 职场文书
大型公益活动策划方案
2014/08/20 职场文书
国庆节主题班会
2015/08/15 职场文书
同学联谊会邀请函
2019/06/24 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android