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一点特殊用法
May 28 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
js实现一键复制功能
Mar 16 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
给实习单位的感谢信
2014/02/01 职场文书
学校与家长安全责任书
2014/07/23 职场文书
店铺转让协议书
2014/12/02 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
《秋思》教学反思
2016/02/23 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python