jQuery控制TR顯示隱藏的幾種方法
更新時(shí)間：2014年06月18日 16:30:52 投稿：whsnow
使用id，這個(gè)方法可以在生成html的時(shí)候動(dòng)態(tài)設(shè)置tr的id，也是用得最多最簡單的一種，其他方法祥看本文
網(wǎng)上有很多，這里介紹三種： 第一種方法，就是使用id，這個(gè)方法可以在生成html的時(shí)候動(dòng)態(tài)設(shè)置tr的id，也是用得最多最簡單的一種，如下：
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr個(gè)數(shù)
$("#tr_"+i).hide();
}
第二種方法，是使用$.each()，這個(gè)方法需要設(shè)置table的id，如下：
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
$.each($("#Tbl tr"), function(i){
if(i > 0){
this.style.display = 'none';
}
});
第三種方法，是通過屬性篩選器，這個(gè)方法需要給tr加上某個(gè)特定屬性，比如class，如下：
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
var trs = $("tr[class='hid']");
for(i = 0; i < trs.length; i++){
trs[i].style.display = "none"; //這里獲取的trs[i]是DOM對象而不是jQuery對象，因此不能直接使用hide()方法
}
就這么簡單。如果是要顯示的話，把相應(yīng)的方法改成show()或者display屬性改為”"即可 實(shí)際應(yīng)用： 說明：默認(rèn)情況下，只顯示“對應(yīng)頁面名稱”所在行，當(dāng)點(diǎn)擊單選按鈕時(shí)，顯示不同的行。
通過id控制隱藏和顯示如下：
$("input[name='f_navState']").click(function(){
//if($("input[name='f_navState']").attr("checked")==true){
$("input[name='f_navState']").each(function(i){
if(this.checked){
var f_navState = $("input[name='f_navState']")[i].value; //獲得單選框的值
if(f_navState==1){
//alert(123);
$("#il").show();
$("#ol").hide();
}else{
//alert(456);
$("#ol").show();
$("#il").hide();
}
}
});
//}
});
您可能感興趣的文章:
相關(guān)文章
詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
元素選擇是一切操作的前提，jQuery中$()函數(shù)最強(qiáng)大最常用的功能之一就是使用選擇器選擇DOM元素。這里就匯總一些十分常用的jQuery選擇器。2017-02-02
jquery原創(chuàng)彈出層折疊效果點(diǎn)擊折疊彈出一個(gè)層
今天整理最近項(xiàng)目里用到的一個(gè)小效果，點(diǎn)擊折疊彈出一個(gè)層給用戶填寫信息，感興趣的朋友可以學(xué)習(xí)下2014-03-03
jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫過ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery，所以又用jquery重新寫了個(gè),需要的朋友可以參考下2014-06-06
下面小編就為大家?guī)硪黄啿サ暮唵螌?shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
實(shí)例詳解jQuery的鏈?zhǔn)骄幊田L(fēng)格
jQuery中的鏈?zhǔn)讲僮?，它讓代碼變得更有層次更簡潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下2021-06-06
在第一講中，已經(jīng)對JQuery做了入門級的介紹，我相信看過的網(wǎng)友都應(yīng)該知道怎么開始寫一個(gè)簡單的JQuery程序了。首先是需要引入一個(gè)JQuery包，其次是根據(jù)JQuery的語法寫代碼就可以了。2010-07-07
jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實(shí)例形式對比分析了jQuery圖標(biāo)插件echarts針對垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法的相關(guān)資料,需要的朋友可以參考下2016-01-01