jquery 隱藏與顯示tr標(biāo)簽示例代碼
更新時(shí)間：2014年06月06日 10:50:41 作者：
隱藏與顯示tr標(biāo)簽的方法有很多，本文使用jquery來(lái)實(shí)現(xiàn),需要的朋友可以參考下
廢話少說(shuō) 直接上代碼 代碼是程序員交流的最好方式 哈哈:
<%@ 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";
//將里面的值設(shè)為空
}
}
</script>
</head>
<center>
<body >
<form action="GetJSPContent" method="post">
<table>
<tr>
<td>通知標(biāo)題</td>
<td><input type="text" name="title"/></td>
</tr>
<tr>
<td>通知內(nèi)容</td>
<td><textarea cols="50" rows="10" name="cxt" >內(nèi)容這塊暫時(shí)沒(méi)處理,本次測(cè)試用例 需要10個(gè)漢字以上測(cè)試</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> 輸入標(biāo)簽：</td><td><input type="text" id="tag1" name="tag"></td>
</tr>
<tr id="tr2" style="display:none">
<td> 輸入號(hào)碼：</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>
實(shí)現(xiàn)效果如下:
復(fù)制代碼 代碼如下:
<%@ 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";
//將里面的值設(shè)為空
}
}
</script>
</head>
<center>
<body >
<form action="GetJSPContent" method="post">
<table>
<tr>
<td>通知標(biāo)題</td>
<td><input type="text" name="title"/></td>
</tr>
<tr>
<td>通知內(nèi)容</td>
<td><textarea cols="50" rows="10" name="cxt" >內(nèi)容這塊暫時(shí)沒(méi)處理,本次測(cè)試用例 需要10個(gè)漢字以上測(cè)試</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> 輸入標(biāo)簽：</td><td><input type="text" id="tag1" name="tag"></td>
</tr>
<tr id="tr2" style="display:none">
<td> 輸入號(hào)碼：</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>
實(shí)現(xiàn)效果如下:
您可能感興趣的文章:
- Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- jquery關(guān)于表格及表格列隱藏和顯示問(wèn)題探討
- jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
- jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
- jquery通過(guò)visible來(lái)判斷標(biāo)簽是否顯示或隱藏
- jQuery 隱藏和顯示 input 默認(rèn)值示例
- jquery顯示隱藏input對(duì)象
- Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏
- jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
- jQuery元素的隱藏與顯示實(shí)例
- jQuery顯示和隱藏 常用的狀態(tài)判斷方法
- jQuery簡(jiǎn)單實(shí)現(xiàn)隱藏以及顯示特效
相關(guān)文章
這篇文章主要介紹了jQuery復(fù)合事件用法,結(jié)合具體實(shí)例形式分析了jQuery復(fù)合事件的簡(jiǎn)單定義與使用方法,需要的朋友可以參考下2017-06-06
下面小編就為大家?guī)?lái)一篇基于jQuery的表單填充實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫(xiě)，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式2012-06-06
jquery制作的彈窗提示窗口插件，包含多種模式。帶有回執(zhí)函數(shù)值的功能,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 菜單插件開(kāi)發(fā)
從軟件到網(wǎng)站，菜單可以說(shuō)是無(wú)處不在。在傳統(tǒng)應(yīng)用軟件開(kāi)發(fā)中，一般都有現(xiàn)成的控件可以使用；但是在網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，基本上要靠開(kāi)發(fā)人員自己動(dòng)手設(shè)計(jì)2012-05-05
niceTitle是一款當(dāng)鼠標(biāo)移到超鏈接上面顯示提示的插件。我們可以使用該插件來(lái)實(shí)現(xiàn)新聞、文字的預(yù)覽。2010-05-05
今天小編就為大家分享一篇關(guān)于jQuery.parseJSON()函數(shù)詳解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
sliderToggle在寫(xiě)jquery的計(jì)時(shí)器setTimeouter中不生效
sliderToggle在setTimeouter中不生效，還報(bào)錯(cuò)說(shuō)是發(fā)生了意想不到的錯(cuò)誤2014-05-05
jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06