Geek asks and answers

How to hide 2nd and 4th row of a table using css or jquery?

Its dynamic code, and I would like to hide the second and fourth rows of the table using the table identifier HMP_options. How to achieve this?

<table id="HMP_options" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tbody>
     <tr>
       <td align="left" colspan="2">
          <table cellspacing="0" cellpadding="0" border="0">
            <input></input>
                 <tbody>
                    <tr><td></td></tr>
                    <tr><td></td></tr>    /* this tr i want to hide */
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>   /* this tr i want to hide */
                 </tbody>
           </table>
        </td>
       </tr>

             

+3
source share
4 answers

I would use this CSS rule:

#HMP_options table tr:nth-child(-2n + 4) {
    display: none;
}

http://jsfiddle.net/ZXjWV/

Since this is IE9 +, you might want to make jQuery to it.

In this example, I assumed that you only want to hide the 2nd and 4th rows. If you want to hide 6, 8, etc., you must use the rule :nth-child(2n).

+6
source

try it

.HMP_options > table td:nth-child(2),
.HMP_options > table td:nth-child(4) { display:none;}
+3
source

css:

.HMP_options tr:nth-child(2), .HMP_options tr:nth-child(4){display: none;}

jQuery:

$('.HMP_options tr:nth-child(2), .HMP_options tr:nth-child(4)').css('display','none');
+1

eq jquery. n . , .

 $("tr:eq(1),tr:eq(4)").hide();
0

More articles:


All Articles