如何使用css或jquery隐藏第2和第4行表?

时间:2014-02-04 06:48:49

标签: javascript jquery html css

它是一个动态代码,我想使用表ID HMP_options隐藏表的第二和第四个tr。怎么做到这一点?

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

               

4 个答案:

答案 0 :(得分:6)

我会使用这个CSS规则:

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

http://jsfiddle.net/ZXjWV/

由于这是IE9 +,你可能想让jQuery帮助它。

在此示例中,我假设您希望 隐藏第2行和第4行。如果你想隐藏第6个,第8个等等,你应该使用:nth-child(2n)规则。

答案 1 :(得分:3)

试试这个

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

答案 2 :(得分:1)

使用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');

答案 3 :(得分:0)

  

在jquery中使用eq。选择匹配中索引n处的元素   组。要匹配的元素的从零开始的索引。

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