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

前端技术 2023/09/05 JavaScript
废话少说 直接上代码 代码是程序员交流的最好方式 哈哈:
复制代码 代码如下:

<%@ 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>

实现效果如下:

本文地址：https://www.stayed.cn/item/12560

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案