jquery 隐藏与显示tr标签

最新推荐文章于 2022-01-25 16:05:33 发布

wq7570875

最新推荐文章于 2022-01-25 16:05:33 发布

阅读量1.8w

点赞数 1

分类专栏： js+jquery 文章标签： jquery

本文链接：https://blog.csdn.net/wq7570875/article/details/27350285

版权

js+jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

<%@ 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 οnchange="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>

实现效果如下: