There are three common ways in which jQuery controls TR to show hiding

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, which is also the simplest one used most often, as follows:

<table> 
<tr><td> This line is not hidden </td></tr> 
<tr id="tr_1"><td> This line needs to be hidden </td></tr> 
<tr id="tr_2"><td> This line needs to be hidden </td></tr> 
... 
</table>

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 id="Tbl"> 
<tr><td> This line is not hidden </td></tr> 
<tr><td> This line needs to be hidden </td></tr> 
<tr><td> This line needs to be hidden </td></tr> 
... 
</table>

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 id="Tbl"> 
<tr><td> This line is not hidden </td></tr> 
<tr><td class="hid"> This line needs to be hidden </td></tr> 
<tr><td class="hid"> This line needs to be hidden </td></tr> 
... 
</table>

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 ""

Practical application:

Note: by default, only the line of "corresponding page name" is displayed. When the radio button is clicked, different lines are displayed.

<tr> 
<td class="tr_title_edit"><label for="f_navname"> Corresponding page links <font color="red">*</font></label></td> 
<td class="tr_content_edit"> 
<input type="radio" id="f_inner" name="f_navState" value="1" checked="checked" /><label for="f_inner"> Internal links </label> 
<input type="radio" id="f_outer" name="f_navState" value="2" /><label for="f_outer"> External links </label></td> 
</tr> 

<tr id="il" style="display:block"> 
<td class="tr_title_edit"><label for="f_pagename"> Corresponding page name </label></td> 
<td class="tr_content_edit"><select name='f_pageid' id="f_pageid"> 
<option value=""></option> 
<option value=""> news </option> 
<option value=""> notice </option> 
</select></td> 
</tr> 
<tr id="ol" style="display:none"> 
<td class="tr_title_edit"><label for="f_navname"> External links </label></td> 
<td class="tr_content_edit"><input type="text" class="inputLine" size="40" id="f_outsidelink" name="f_outsidelink" /></td> 
</tr>

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(); 
} 

} 
}); 
//} 

});