在很多现实的场景中，有的文本框我们希望在选择“是”的按钮之后才出现，这就需要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. 转：在ElasticSearch之下（图解搜索的故事）

    ElasticSearch 2 (9) - 在ElasticSearch之下(图解搜索的故事) 摘要 先自上而下,后自底向上的介绍ElasticSearch的底层工作原理,试图回答以下问题: 为什么我 ...

  2. 区别： @Secured(), @PreAuthorize() 及 @RolesAllowed()

    在Spring security的使用中,为了对方法进行权限控制,通常采用的三个注解,就是@Secured(), @PreAuthorize() 及 @RolesAllowed(). 但是着三者之间的 ...

  3. (转)【Android测试工具】03. ApkTool在Mac上的安装和使用（2.0版本）

    http://blog.csdn.net/wirelessqa/article/details/8997168 http://code.google.com/p/android-apktool/dow ...

  4. Windows环境变量

    说明:系统文件盘为C盘,操作系统为Windows XP.登录用户名为weste.计算机名为icech 说明:不同的操作系统如Windows XP和Windows 2000相对应的一些路径是不同的,这里 ...

  5. 【jmeter】JMeter测试MongoDB

    JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接进行测试MongoDB,还有一种是写Java代码方式测试MongoDB性能. 第一种方法 1.编写Java代码,内容如下: pa ...

  6. POJ 3709 K-Anonymous Sequence

    题目大意:将一个升序的,有N个元素的序列,分组.要求每组的元素不少于K个,计算出组内各元素与最小元素的之差的和,将每组的这个值加起来,其和要最小. N<500000,K<N 分析: dp[ ...

  7. System.FormatException: Index (zero based) must be greater than or equal to zero and less than the size of the argument list

    static void Main(string[] args) { StringBuilder sb = new StringBuilder(); string test = "124454 ...

  8. java.util.concurrent

    软件包 java.util.concurrent 的描述 在并发编程中很常用的实用工具类.此包包括了几个小的.已标准化的可扩展框架,以及一些提供有用功能的类,没有这些类,这些功能会很难实现或实现起来冗 ...

  9. js复习（二）

    一.window.document对象(一)找元素 docunment.getElementById("id"):根据id找,最多找一个: docunment.getElement ...

  10. dede图片横向滚动

    <div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...