jquery 隱藏與顯示tr標(biāo)簽示例代碼
更新時間：2014年06月06日 10:50:41 作者：
隱藏與顯示tr標(biāo)簽的方法有很多，本文使用jquery來實現(xiàn),需要的朋友可以參考下
廢話少說 直接上代碼 代碼是程序員交流的最好方式 哈哈:
<%@ 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)容這塊暫時沒處理,本次測試用例 需要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> 輸入標(biāo)簽：</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>
實現(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)容這塊暫時沒處理,本次測試用例 需要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> 輸入標(biāo)簽：</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>
實現(xiàn)效果如下:
您可能感興趣的文章:
- Jquery 點擊按鈕顯示和隱藏層的代碼
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導(dǎo)航條
- jquery關(guān)于表格及表格列隱藏和顯示問題探討
- jQuery Mobile的loading對話框顯示/隱藏方法分享
- jQuery動態(tài)顯示和隱藏datagrid中的某一列的方法
- jquery通過visible來判斷標(biāo)簽是否顯示或隱藏
- jQuery 隱藏和顯示 input 默認(rèn)值示例
- jquery顯示隱藏input對象
- Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏
- jquery和js實現(xiàn)對div的隱藏和顯示方法
- jQuery元素的隱藏與顯示實例
- jQuery顯示和隱藏 常用的狀態(tài)判斷方法
- jQuery簡單實現(xiàn)隱藏以及顯示特效
相關(guān)文章
本篇文章主要是對點擊回到頁面頂部或是首頁的功能進行了介紹，這是頁面常用到的效果，需要的朋友可以過來參考下2016-11-11
jQuery+slidereveal實現(xiàn)的面板滑動側(cè)邊展出效果
WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實例給大家介紹一下面板滑動展示效果。2015-03-03
本文為大家介紹下使用jquery驗證郵箱、驗證手機號碼，具體實現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的多級下拉菜單代碼,可實現(xiàn)點擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
使用Jquery搭建最佳用戶體驗的登錄頁面之記住密碼自動登錄功能（含后臺代碼）
今天將登錄功能徹底完成，加入記住密碼自動登錄功能，密碼在客戶端進行第一次加密存儲。并修改了一些bug，優(yōu)化js代碼，上一版本太亂了。2011-07-07
jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能
這篇文章主要介紹了jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
今天看到一個技術(shù)類網(wǎng)站，在顯示代碼的地方，邊框會拉長，很方便用戶閱讀體驗，特看了下代碼，原理很簡單，使用了jquery，不適用也可以實現(xiàn)2011-12-12
Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單
這篇文章主要介紹了Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單的簡單實例演示，可以選擇對應(yīng)省、市、縣，希望大家可以喜歡。2015-11-11
下面小編就為大家?guī)硪黄钊肜斫鈐Query中的事件冒泡。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
今天發(fā)現(xiàn)HotKeys插件的功能真的很強大,且使用簡單,以后再也不用考慮鍵值的問題了,自己定義每個鍵的函數(shù)就行了2008-08-08