DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery控制TR顯示隱藏的幾種方法
jQuery控制TR顯示隱藏的幾種方法
編輯:JQuery特效代碼     

網上有很多,這裡介紹三種: 第一種方法,就是使用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(); 
           } 
             
        } 
        }); 
       //} 
    
   }); 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved