jquery 隐藏与显示tr标签示例代码
更新时间：2014年06月06日 10:50:41 作者：
隐藏与显示tr标签的方法有很多，本文使用jquery来实现,需要的朋友可以参考下
废话少说 直接上代码 代码是程序员交流的最好方式 哈哈:
<%@ 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>
实现效果如下:
复制代码 代码如下:
<%@ 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 点击按钮显示和隐藏层的代码
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
- jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
- jquery关于表格及表格列隐藏和显示问题探讨
- jQuery Mobile的loading对话框显示/隐藏方法分享
- jQuery动态显示和隐藏datagrid中的某一列的方法
- jquery通过visible来判断标签是否显示或隐藏
- jQuery 隐藏和显示 input 默认值示例
- jquery显示隐藏input对象
- Jquery设置attr的disabled属性控制某行显示或者隐藏
- jquery和js实现对div的隐藏和显示方法
- jQuery元素的隐藏与显示实例
- jQuery显示和隐藏 常用的状态判断方法
- jQuery简单实现隐藏以及显示特效
相关文章
这篇文章主要介绍了jQuery设置图片等比例缩小的方法,涉及jQuery针对页面元素属性动态判定与设置相关操作技巧,需要的朋友可以参考下2017-04-04
下面小编就为大家带来一篇老生常谈JQuery data方法的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了jQuery实现单击弹出Div层窗口效果,具有可关闭可拖动的功能,涉及jQuery响应鼠标事件动态变换页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
开发人员利用jQuery代码不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段，大家可以直接拿来用。2015-09-09
本篇文章主要是对jquery cookie的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章介绍了Jquery时间验证和转换工具小例子，有需要的朋友可以参考一下2013-07-07
一个小图标特效，非常有趣的，下面给大家分享基于jquery制作的小图标上下滑动特效，代码简单易懂，需要的朋友参考下2017-01-01
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
这篇文章主要介绍了解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
下面小编就为大家带来一篇jQuery实现选项联动轮播效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
你是不是经常作这种开发，前端用JS写逻辑，后端用aspx或者ashx作服务？你是不是经常在请求aspx的时候在查询字符串中拼接诸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？2014-05-05
最新评论