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

Question

Its a dynamic code and i would like to hide second and 4th tr of the table using table id 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>

Answer 1

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 help it.

In this example I assumed that you want only hide 2nd and 4th row. If you want to hide 6th, 8th and so on as well you should use :nth-child(2n) rule.