Display hiding of jquery control tr

There are many online, here are three kinds of:

The first is to use the ID, which can be used to dynamically set the ID of the TR when generating HTML, and is the simplest one to use, as follows:

HTML code

2. < Table >
4. < TR > < TD > This line does not hide </td></tr>
6. < TR id="tr_1"><td> This line to hide </TD > </ TR >
8. < TR id="tr_2"><td> This line to hide </ TD > </ TR >
10. ...
12. </ Table >

Then control explicit can be used directly

JS Code

1. for (var i = 1; i < Tr_len; i++) { //tr_len is the number of TR to be controlled
2. $ ("#tr_"+i). Hide ();
3. }

The second method is to use $.each (), which needs to set the table ID as follows:

HTML code

2. < Table id="TBL">
4. < TR > < TD > This line does not hide </td></tr>
6. < TR > < TD > This line to hide </td></tr>
8. < TR > < TD > This line to hide </td></tr>
10. ...
12. </ Table >

Then control explicit can be used directly

JS Code

1. $.each ($ ("#Tbl tr"), function(i) {
2. if (i > 0) {
3. this. style.display = ' None ';
4. }
5. });

The third method , through a property filter, requires that a specific attribute, such as class, be added to TR, as follows:

HTML code

2. < Table id="TBL">
4. < TR > < TD > This line does not hide </td></tr>
6.     < tr > < td  class = "HID" > this line to hide </ TD > </ tr >    
8. < TR > < TD class="hid"> This line to hide </td></ TR>
10. ...
12. </ Table >

Then control explicit can be used directly

JS Code

1. var trs = $ ("tr[class= ' hid ']");
2. for (i = 0; i < trs.length; i++) {
3. Trs[i].style.display = "None"; //Trs[i obtained here] is a DOM object instead of a jquery object, so you cannot use the Hide () method directly
4. }

It's so simple. If it is to be displayed, change the corresponding method to show () or display property to "" to

Practical application:

Description: By default, only the row with the corresponding page name is displayed, and when the radio button is clicked, a different row is displayed.

HTML code

2. < tr >    
4. < td  class = "Tr_title_edit" > label  for = "F_navname" > corresponding page link < font  color = "red" > * </ font > </ label > </ TD >   
6. < td    Class = "Tr_content_edit" >   
8. < input  type = "Radio"  id =" F_inner "   name = "f_navstate"  value =" 1 "  checked =" checked "  /> < label  for = "F_inner" > internal link </ label >   
10. < input type="Radio" id="F_outer" name="F_navstate" value= "2" /> < label for ="F_outer"> External links </label>< /TD>
12. </ TR >
16. < TR id="il" style="Display:block">
18. < TD class="Tr_title_edit"><label for =" F_pagename "> corresponding page name </label></TD >
20. <  TD class="Tr_content_edit"><Select name=' F_pageid ' id="F_pageid">
22. < option Value=""></option>
24. < option Value=""> news </option>
26. < option Value=""> notification </option>
28. </ Select > </ TD >
30. </ TR >
32. < TR id="ol" style="Display:none">
34. < td  class = "Tr_title_edit" > label  for = "F_navname" > External links </ label > </ TD >   
36. < td    Class = "Tr_content_edit" > < input  type = " Text "  class =" Inputline "  < span class= "attribute" >size = "all"  id = "F_outsidelink"   name =< Span class= "Attribute-value" > "F_outsidelink"  /> </ td >   
38. </ TR >

Hidden and displayed by ID control are as follows:

JS Code

2. $ ("input[name= ' f_navstate ']"). Click (function() {
4. //if ($ ("Input[name= ' f_navstate ')"). attr ("checked") ==true) {
6. $ ("input[name= ' f_navstate ')"). each (function(i) {
8. if (this. checked) {
10. var f_navstate = $ ("input[name= ' f_navstate ')") [I].value; //Get the value of the Radio box
12. if (f_navstate==1) {
14. //alert (123);
16. $ ("#il"). Show ();
18. $ ("#ol"). Hide ();
20. }Else{
22. //alert (456);
24. $ ("#ol"). Show ();
26. $ ("#il"). Hide ();
28. }
32. }
34. });
36. //}
40. });