在很多现实的场景中，有的文本框我们希望在选择“是”的按钮之后才出现，这就需要js控制TR的隐藏和显示，如何控制，本文为大家揭晓

下文分享的一段代码：选择是的按钮就显示身高和体重的文本框的代码。注意：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.效果

http://www.manongjc.com/java/java_tutorial.html

http://www.manongjc.com/jsp/jsp_tutorial.html

 
 

js控制TR的显示隐藏的更多相关文章

  1. js控制TR的显示影藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方 ...

  2. jQuery控制TR的显示隐藏

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...

  3. js控制ul的显示隐藏，对象的有效范围

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  8. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  9. Dynamics CRM 365 不用按钮工具，直接用js脚本控制按钮的显示隐藏

    Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...

随机推荐

  1. 通过Profiles查看create语句的执行时间消耗 (转)

    一,查看profiles的状态值   1,查看profiles是否已经打开了,默认是不打开的.   mysql> show profiles;   Empty set (0.02 sec) my ...

  2. (转)C# 使用BackgroundWorker

    本文转载自:http://blog.csdn.net/andrew_wx/article/details/6615077 该例子为使用BackgroundWorker在TextBox文本中产生一个10 ...

  3. MySQL存储引擎【InnoDB、MyISAM、Memory】

    数据库,MySQL这样存在多存储引擎的数据库软件,清楚常见的存储引擎的区别,使用合适的存储引擎,使得项目跑的更顺畅,有时候对于一个项目,甚至比项目本身都重要.这篇文章,旨在浅谈常见的三种存储引擎的区别 ...

  4. MySQL时间戳和时间格式转换函数

    MySQL时间戳和时间格式转换函数:unix_timestamp and from_unixtime unix_timestamp将时间转化成时间戳格式.from_unixtime将时间戳转化成时间格 ...

  5. android学习笔记36——使用原始XML文件

    XML文件 android中使用XML文件,需要开发者手动创建res/xml文件夹. 实例如下: book.xml==> <?xml version="1.0" enc ...

  6. TX Textcontrol 使用总结四——打印

    使用内置的打印对话框在Text Control中只需一行代码就可以实现打印操作,通过调研 TextControl.Print 方法将打开一个打印对话框,用户可以设置打印机和其他打印参数.==>t ...

  7. MongoDB源码概述——内存管理和存储引擎

    原文地址:http://creator.cnblogs.com/ 数据存储: 之前在介绍Journal的时候有说到为什么MongoDB会先把数据放入内存,而不是直接持久化到数据库存储文件,这与Mong ...

  8. BestCoder Round #85 hdu5777 domino

    domino 题意: 问题描述 小白在玩一个游戏.桌子上有n张多米诺骨牌排成一列.它有k次机会,每次可以选一个还没有倒的骨牌,向左或者向右推倒.每个骨 牌倒下的时候,若碰到了未倒下的骨牌,可以把它推倒 ...

  9. PKU 2406 Power Strings（KMP最长循环不重叠字串）

    题意:给一个字符串S长度不超过10^6,求最大的n使得S由n个相同的字符串a连接而成,如:"ababab"则由n=3个"ab"连接而成,"aaaa&q ...

  10. Git Step by Step

    原文地址:http://www.cnblogs.com/wilber2013/category/643754.html 1.Git简介 2.Git本地仓库 3.Git对象模型 4.探索.git目录 5 ...