jquery - :even＆:odd-在每个子标题之后重置

我有这张桌子：

<style>

    table thead tr { background-color: #D5D5D5 ; font-size:9pt}
    table tr.asmtHeader { background-color: #E3E3E3; }
    table tr.dataRow td { text-align: center; vertical-align: top; }
    table tr.dataRow:nth-child(odd) { background-color: #EFEFEF; }

</style>

<table>
    <thead><tr><th></tr></thead>
    <tr class="asmtHeader"><td></td></tr>
        <tr class="dataRow"><td></td></tr>
        <tr class="dataRow"><td>should be #EFEFEF</td></tr>
        <tr class="dataRow"><td></td></tr>
    <tr class="asmtHeader"><td></td></tr>
        <tr class="dataRow"><td></td></tr>
        <tr class="dataRow"><td>should be #EFEFEF</td></tr>
        <tr class="dataRow"><td></td></tr>
        <tr class="dataRow"><td>should be #EFEFEF</td></tr>
</table>

目标是仅对class =“ dataRow”进行斑马条纹，但始终在class =“ asmtHeader”之后的第一个开始时进行清除。如果删除“ table tr.dataRow：nth-​​child（odd）”样式并添加此行，它将排除asmtHeader，但不会重置偶数/奇数：

$("tr.dataRow:odd").css( {
    "background": "#EFEFEF",
    "text-align": "center",
    "vertical-align": "top" });

有没有办法让偶/奇数复位？

最佳答案

如我所见，asmtHeader应该是一个表头，为什么不这样做呢。 （如此循环），但是此解决方案使用css和js且很复杂。

基于此问题https://graphicdesign.stackexchange.com/questions/25941/trouble-zebra-striping-a-table-with-children-with-css
您可以使用

            <tr><th>Parent 1</th></tr>
            <tr><td>Child A</td></tr>
            <tr><td>Child B</td></tr>
            <tr><td>Child C</td></tr>

结构。您可以在http://jsfiddle.net/3MH9h/中找到该主题的示例。