網上有很多,這裡介紹三種: 第一種方法,就是使用id,這個方法可以在生成html的時候動態設置tr的id,也是用得最多最簡單的一種,如下:
這行不隱藏這行要隱藏這行要隱藏
那麼控制顯隱可以直接使用
for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr個數 $("#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(); } } }); //} });