css - 使用纯 css 不考虑不可见行的交替行颜色

Question

加载时我的表看起来像

 <table id="mytable">
    <tr><td>&nbsp;</td></tr> //odd color
    <tr><td>&nbsp;</td></tr> //even color
    <tr><td>&nbsp;</td></tr> //odd color
    <tr><td>&nbsp;</td></tr> //even color
 </table>

在某些 Action 上它变成了

<table id="mytable">
    <tr><td>&nbsp;</td></tr> //odd color
    <tr style="display: none;"><td>&nbsp;</td></tr> //even color
    <tr><td>&nbsp;</td></tr> //odd color
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>`
 </table>

如果第二行不可见，第三行应该显示均匀的颜色

Answer 1

试试这个简单的:

$("#mytable tr").removeClass("odd even");
$("#mytable tr:visible:odd").addClass("odd");
$("#mytable tr:visible:even").addClass("even");

table,
th,
td {
  border: 1px solid black;
}
.odd {
  background-color: #99FFFF;
}
.even {
  background-color: #FFFF99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='mytable'>
  <tr>
    <td>&nbsp;1111</td>
  </tr>
  <tr style="display: none;">
    <td>&nbsp;2222</td>
  </tr>
  <tr>
    <td>&nbsp;3333</td>
  </tr>
  <tr>
    <td>&nbsp;4444</td>
  </tr>
</table>

http://jsfiddle.net/fLc1aujb/