这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在很多现实的场景中,有的文本框我们希望在选择 "是" 的按钮之后才出现,这就需要 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.phperz.com/article/17/0623/266828.html