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實(shí)現(xiàn)點(diǎn)擊頁(yè)面回到頂部
本篇文章主要是對(duì)點(diǎn)擊回到頁(yè)面頂部或是首頁(yè)的功能進(jìn)行了介紹，這是頁(yè)面常用到的效果，需要的朋友可以過(guò)來(lái)參考下2016-11-11
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開(kāi)發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過(guò)按鈕觸發(fā)調(diào)用面板展示。常見(jiàn)的有頁(yè)面?zhèn)冗吇雒姘逍Ч１疚膶⑹褂胘Query插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03
jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫(huà)效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁(yè)面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
使用Jquery搭建最佳用戶體驗(yàn)的登錄頁(yè)面之記住密碼自動(dòng)登錄功能（含后臺(tái)代碼）
今天將登錄功能徹底完成，加入記住密碼自動(dòng)登錄功能，密碼在客戶端進(jìn)行第一次加密存儲(chǔ)。并修改了一些bug，優(yōu)化js代碼，上一版本太亂了。2011-07-07
jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
基于jquery的代碼顯示區(qū)域自動(dòng)拉長(zhǎng)效果
今天看到一個(gè)技術(shù)類網(wǎng)站，在顯示代碼的地方，邊框會(huì)拉長(zhǎng)，很方便用戶閱讀體驗(yàn)，特看了下代碼，原理很簡(jiǎn)單，使用了jquery，不適用也可以實(shí)現(xiàn)2011-12-12
Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單的簡(jiǎn)單實(shí)例演示，可以選擇對(duì)應(yīng)省、市、縣，希望大家可以喜歡。2015-11-11
下面小編就為大家?guī)?lái)一篇深入理解jQuery中的事件冒泡。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
今天發(fā)現(xiàn)HotKeys插件的功能真的很強(qiáng)大,且使用簡(jiǎn)單,以后再也不用考慮鍵值的問(wèn)題了,自己定義每個(gè)鍵的函數(shù)就行了2008-08-08