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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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中MVC的开发经验分享
2012/05/17 PHP
php简单获取目录列表的方法
2015/03/24 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
微信支付开发发货通知实例
2016/07/12 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS获取时间的方法
2015/01/21 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python聊天室实例程序分享
2016/01/05 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
几个Shell Script面试题
2012/08/31 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
销售找工作求职信
2013/12/20 职场文书
大学班长的职责
2014/01/27 职场文书
九年级政治教学反思
2014/02/06 职场文书
社区工作者演讲稿
2014/05/23 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书