编程 Javascript

jquery 隐藏与显示tr标签示例代码

Posted in Javascript onJune 06, 2014

废话少说直接上代码代码是程序员交流的最好方式哈哈:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'index.jsp' starting page</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<!-- 
<link rel="stylesheet" type="text/css" href="styles.css"> 
--> 
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 
function selectChange(obj){ 
var value=obj.value; 
var v1 = document.getElementById("tr1"); 
var v2 = document.getElementById("tr2"); 
if(value==0){ 
console.log("two is hidden"); 
v1.style.display="none"; 
v2.style.display="none"; 
}else if(value==1){ 
v1.style.display="block"; 
v2.style.display="none"; 
}else{ 
v1.style.display="none"; 
v2.style.display="block"; 
//将里面的值设为空 
} 
} 
</script> 
</head> 
<center> 
<body > 
<form action="GetJSPContent" method="post"> 
<table> 
<tr> 
<td>通知标题</td> 
<td><input type="text" name="title"/></td> 
</tr> 
<tr> 
<td>通知内容</td> 
<td><textarea cols="50" rows="10" name="cxt" >内容这块暂时没处理,本次测试用例 需要10个汉字以上测试</textarea></td> 
</tr> 
<tr> 
<td>通知类型</td><td><select onchange="selectChange(this)"> 
<option value="0" select="true">所有用户</option> 
<option value="1">用户组</option> 
<option value="2">单用户</option> 
</select></td> 
</tr> 
<tr id="tr1" style="display:none"> 
<td> 输入标签：</td><td><input type="text" id="tag1" name="tag"></td> 
</tr> 
<tr id="tr2" style="display:none"> 
<td> 输入号码：</td><td><input type="text" id="phone" name="phone"></td> 
</tr> 
<tr> 
<td><input type="submit"/></td> 
<td><input type="reset"/></td> 
</tr> 
</table> 
</form> 
</body> 
</center> 
</html>

实现效果如下:

jquery 隐藏与显示tr标签示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

css图片自适应大小

Nov 28 Javascript

js表格排序实例分析（支持int,float,date,string四种数据类型）

May 06 Javascript

在JavaScript应用中实现延迟加载的方法

Jun 25 Javascript

jquery通过name属性取值的简单实现方法

Jun 20 Javascript

js实现弹窗暗层效果

Jan 16 Javascript

react实现菜单权限控制的方法

Dec 11 Javascript

JS中Object对象的原型概念基础

Jan 29 Javascript

vue 实现复制内容到粘贴板clipboard的方法

Mar 17 Javascript

layui table 获取分页 limit的方法

Sep 20 Javascript

Vue.directive 实现元素scroll逻辑复用

Nov 29 Javascript

vue接口请求加密实例

Aug 11 Javascript

浅谈nuxtjs校验登录中间件和混入(mixin)

Nov 06 Javascript

Node.js中对通用模块的封装方法

Jun 06 #Javascript

JavaScript中对循环语句的优化技巧深入探讨

Jun 06 #Javascript

jquery修改网页背景颜色通过css方法实现

Jun 06 #Javascript

jquery动态调整div大小使其宽度始终为浏览器宽度

Jun 06 #Javascript

JavaScript也谈内存优化

Jun 06 #Javascript

Javascript中的delete操作符详细介绍

Jun 06 #Javascript

Javascript的严格模式strict mode详细介绍

Jun 06 #Javascript