jQuery控制TR顯示隱藏的幾種方法
網(wǎng)上有很多,這里介紹三種: 第一種方法,就是使用id,這個方法可以在生成html的時候動態(tài)設置tr的id,也是用得最多最簡單的一種,如下:
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr個數(shù)
$("#tr_"+i).hide();
}
第二種方法,是使用$.each(),這個方法需要設置table的id,如下:
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
$.each($("#Tbl tr"), function(i){
if(i > 0){
this.style.display = 'none';
}
});
第三種方法,是通過屬性篩選器,這個方法需要給tr加上某個特定屬性,比如class,如下:
| 這行不隱藏 |
| 這行要隱藏 |
| 這行要隱藏 |
那么控制顯隱可以直接使用
var trs = $("tr[class='hid']");
for(i = 0; i < trs.length; i++){
trs[i].style.display = "none"; //這里獲取的trs[i]是DOM對象而不是jQuery對象,因此不能直接使用hide()方法
}
就這么簡單。如果是要顯示的話,把相應的方法改成show()或者display屬性改為”"即可 實際應用: 說明:默認情況下,只顯示“對應頁面名稱”所在行,當點擊單選按鈕時,顯示不同的行。
通過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();
}
}
});
//}
});
相關文章
詳解jquery插件jquery.viewport.js學習使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學習使用方法,具有一定的參考價值,有興趣的可以了解一下2017-09-09
jquery原創(chuàng)彈出層折疊效果點擊折疊彈出一個層
今天整理最近項目里用到的一個小效果,點擊折疊彈出一個層給用戶填寫信息,感興趣的朋友可以學習下2014-03-03
jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫過ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery,所以又用jquery重新寫了個,需要的朋友可以參考下2014-06-06
jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結合實例形式對比分析了jQuery圖標插件echarts針對垂直網(wǎng)格線的相關設置操作技巧,需要的朋友可以參考下2017-03-03
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結合完整實例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法的相關資料,需要的朋友可以參考下2016-01-01

