`
sunxboy
  • 浏览: 2886172 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

使用prototype控制顯示／隱藏塊

prototypeJavaScriptXHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form action="/vbao/externalBankPay.do?method=testExternal&" name="testExternal" id="testExternal" method="POST">
  <table width="80%" border="0" align="center" cellpadding="0"
		cellspacing="0">
    <tr>
      <td><table width="100%" border="0" align="center" cellpadding="0"
				cellspacing="0" class="lrd-3">
          <tr>
            <td height="125" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="40" class="font3"><div align="right">交易类型： </div></td>
                        <td height="40"><div align="left" class="font1">
                            <select name="tradeType" onchange="test_change()" id="tradeType">
                              <option value="1">即时到帐</option>
                              <option value="2">基于交易</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr bgcolor="#FFFFFF">
                        <td height="40" class="font3"><div align="right">商品名称： </div></td>
                        <td height="40"><div align="left">
                            <input type="text" name="goodsName" size="50" value="" >
                            <font color="red">*</font> </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr>
                        <td height="40" class="font3"><div align="right">商品单价： </div></td>
                        <td height="40"><input type="text" name="goodsPrice" size="50" value="" >
                          <font class="font3">元</font><font
								color="red">*</font> </td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postModeTr">
                        <td height="40" class="font3"><div align="right">邮寄方式： </div></td>
                        <td height="40"><div align="left">
                            <select name="postMode" onchange="test_change()" id="postMode">
                              <option value="1">平邮</option>
                              <option value="2">快递</option>
                              <option value="3">EMS</option>
                              <option value="4">不需要运输</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postTakeOnTr">
                        <td height="40" class="font3"><div align="right">邮费承担方式： </div></td>
                        <td height="40"><div align="left">
                            <select name="postTakeOn" onchange="test_change()" id="postTakeOn">
                              <option value="1">买方承担</option>
                              <option value="2">卖方承担</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postFeeTr">
                        <td height="40" class="font3"><div align="right">邮费： </div></td>
                        <td height="40"><div align="left">
                            <input type="text" name="postFee" value="" id="postFee">
                            <font class="font3">元</font><font color="red">*</font> </div></td>
                        <td height="40"> </td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </table>
</form>
<script type="text/javascript" src="prototype.js"></script>
<script   language="javascript">  
  <!--  
  test_change();
  function   test_change(){  
  	//Element.hide("t1","t2","t3"); 
	if($("tradeType").value == "1") 
	{
		Element.hide("postModeTr");
		Element.hide("postTakeOnTr");
		Element.hide("postFeeTr");
	}else 
	{
		Element.show('postModeTr')
		
		if($("postMode").value == "4")
		{
			Element.hide('postTakeOnTr');
			Element.hide('postFeeTr');
		}else
		{
			Element.show("postTakeOnTr");
			
			if($("postTakeOn").value == "2")
			{
			   Element.hide("postFeeTr");
			}else 
			{
				Element.show("postFeeTr");
			}
		}
	
	}  
  }  
  //-->  
  </script>
</body>
</html>
 
1
顶
1
踩
分享到：
| 基于prototype的易用表单验证(轉)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Axure交互设计实例介绍.docx

    Dynamic Panel (动态面板) 是一种专门用在设计 Prototype 动态功能的 Widget，Dynamic Panel 可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示 Dynamic Panel 来达成...

    tab标签栏.rar

    类的实例化使用`new`关键字，类的方法可以使用`prototype`进行扩展，以共享给类的所有实例。同时，类支持静态方法和静态属性，这些是属于类本身而不是实例的。 总的来说，“tab标签栏.rar”项目展示了如何利用ES6的...

    全动态选项卡 css js

    3. **隐藏与显示内容**：通过CSS的`display`属性，我们可以控制各个内容面板的可见性。默认情况下，所有内容面板应设置为隐藏(`display: none`)，只有与当前选中选项卡关联的内容才显示(`display: block`或`flex`等)...

    javascript面试题

    - 使用`finally`块确保某些代码无论是否发生异常都会被执行 #### 10. 函数`DateDemo`的返回结果 给定今天的日期为2010年7月17日，函数`DateDemo`的返回结果为：“今天日期是：7/17/2010”。 #### 11. for循环的...

    二十三种设计模式【PDF版】

    设计模式之 Prototype(原型) 用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 B. 结构模式 设计模式之 Adapter(适配器) 使用类再生的两个方式:组合(new)和继承(extends),这个已经在 ...

    Google-JavaScript-编码规范指南

    - **显示被隐藏的内容**：通过指南中的按钮可以显示更多详细信息。 - **背景介绍**：JavaScript作为一种客户端脚本语言，在Google的许多项目中广泛应用。 - **规范遵守**：列出在编写JavaScript时应遵循的规则。 ...

    JavaScript 学习笔记

    例如，`element.style.backgroundColor`可以改变背景色，`element.style.display`可以控制元素的显示与隐藏。此外，CSS3引入了动画和过渡，JavaScript可以控制这些效果的启动和停止，增加页面的动态感。 **DOM操作*...

    卡萨米前端测试题最终版.

    13. **图片轮播思路**：使用定时器实现自动切换，配合CSS和JavaScript控制图片的显示与隐藏，加上过渡效果，以及左右切换按钮。 14. **JavaScript框架与特点**：常见的有React（组件化、虚拟DOM）、Vue.js（易学...

    axios的拦截请求与响应方法

    在这个例子中，`fetchData`方法在发送请求前将`loading`设置为`true`，在请求完成后设置为`false`，实现了显示和隐藏加载指示器的效果。 总结来说，`axios`的拦截器功能是其强大之处，它允许我们在请求发送和响应...

    vue.js开发实现全局调用的MessageBox组件实例代码

    `data`函数返回了组件的状态，其中`isShowMessageBox`控制弹框的显示与隐藏，`resolve`和`reject`用于处理Promise，而`promise`用于保存Promise对象。 在`methods`中，有两个关键的方法：`confirm`和`cancel`。`...

    电子商务网站上的常用的js放大镜效果

    4. **控制放大镜蒙层和放大后图片的显示与隐藏**：当鼠标移出原图容器时，隐藏放大镜蒙层和放大后图片；当鼠标再次移入时，则显示它们。 ```javascript zoomer.eventproxy.addEventListener('mouseleave', ...

    jquery-1.1.3 效率提高800%

    "jsonp": 使用JSONP载入一个JSON代码块. 会在URL的末尾添加"?callback=?"来指明回调函数。(jQuery 1.2以上的版本支持) "text": 文本格式的字符串 error 数据类型: Function 请求失败时执行的函数。...

    javascript面试题目

    - **选项A**: `with` - 是JavaScript的一个关键字，用于执行一段代码块，该代码块中可以访问另一个对象的属性。 - **选项B**: `parent` - 不是关键字，而是一个全局对象属性，用于引用父窗口。 - **选项C**: `class`...

    精通javascript+jQuery书中实例

    6. `.hide()` 和 `.show()`：隐藏或显示元素，`.fadeIn()` 和 `.fadeOut()` 则提供了动画效果。 7. `.ajax()` 方法：简化了 AJAX 调用，用于异步请求服务器数据，如 `$.ajax({url: "myUrl", type: "GET", success: ...

    计算机类英语词汇-170

    - **应用**: 在机器学习中，用于描述隐藏变量或潜在特征。 #### 5. Non-trivial (重要的) - **定义**: 非平凡的问题或任务，指的是具有一定复杂度且不能轻易解决的问题。 - **应用**: 在软件开发中，用来形容需要...

Magicbox
Global site tag (gtag.js) - Google Analytics