JQuery controls several ways TR is hidden

  • 2020-03-30 03:22:01
  • OfStack

There are many on the Internet, here are three: the first method is to use id, this method can dynamically set the id of tr when generating HTML, is also the most used one of the simplest, as follows:


  
TABLE_TAG_REPLACE_MARK_0
 

Then control implicit can be used directly


  for(var i = 1; i < tr_len; i++){ //Tr_len is the number of tr's you want to control
       $("#tr_"+i).hide();  
  } 

The second method is to use $.each(), which requires setting the id of the table as follows:


  
TABLE_TAG_REPLACE_MARK_1
 

Then control implicit can be used directly


  $.each($("#Tbl tr"), function(i){   
     if(i > 0){    
        this.style.display = 'none';  
     }  
  }); 

The third method is through the attribute filter, which requires adding a specific attribute to tr, such as class, as follows:


  
TABLE_TAG_REPLACE_MARK_2
 

Then control implicit can be used directly


  var trs = $("tr[class='hid']");  
  for(i = 0; i < trs.length; i++){   
      trs[i].style.display = "none"; //The TRS [I] obtained here is a DOM object, not a jQuery object, so the hide() method cannot be used directly
  } 

It's that simple. If you want to display, change the method to show() or the display property to "".


   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Hide and display by id control as follows:


  $("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;  //Gets the value of the marquee
           if(f_navState==1){ 
            //alert(123); 
            $("#il").show(); 
            $("#ol").hide(); 
           }else{ 
            //alert(456); 
            $("#ol").show(); 
            $("#il").hide(); 
           } 
             
        } 
        }); 
       //} 
    
   }); 

Related articles: