如何在可折叠表中制作颜色的备用表行

Question

更新了html：我已经使用插件使我的HTML表可折叠起来，该插件可以使没有其他父母作为data-parent=""的行。在这里，我只是在以下html中显示父母的行，而不是他们的孩子：

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Week1</th>
        <th>Week2</th>
        <th>Week3</th>
        <th>Week4</th>
    </tr>
</thead>
<tbody>
    <tr data-parent=""> //should be grey
        <td>+John</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//white
        <td>+Boney</td>
        <td>90</td>
        <td>40</td>
        <td>10</td>
        <td>80</td>
    </tr>
    <tr data-parent=""> //grey
        <td>Dwihn</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//white
        <td>+Arkon</td>
        <td>80</td>
        <td>20</td>
        <td>70</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Tyulor</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
</tbody>
</table>

我只想将备用的行颜色提供给只有data-parent=""的行，而与拥有的数据无关。数据行是可分类的。即使在用data-parent=""对行进行排序之后，也应该具有其他行颜色。

Answer 1

使用tr:nth-child(even)和tr:nth-child(odd)选择器

最终编辑：使其与数据属性属性合作

https://jsfiddle.net/x6r8rq6a/4/

Answer 2

这是针对"数据父母"的。代码更新

table tr {
  background: #fff;
}
tbody tr[data-parent=""]{
  background: grey;
}
tbody tr[data-parent=""] ~ tr[data-parent=""]:nth-child(even){
  background: yellow;
}

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Week1</th>
        <th>Week2</th>
        <th>Week3</th>
        <th>Week4</th>
    </tr>
</thead>
<tbody>
    <tr data-parent=""> //should be grey
        <td>+John(grey)</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore i.e white as background color
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore i.e white as background color
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//yellow
        <td>+Boney(yellow)</td>
        <td>90</td>
        <td>40</td>
        <td>10</td>
        <td>80</td>
    </tr>
    <tr data-parent=""> //grey
        <td>+Dwihn(grey)</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//yellow
        <td>+Arkon(yellow)</td>
        <td>80</td>
        <td>20</td>
        <td>70</td>
        <td>50</td>
    </tr>
    <tr data-parent="6">
        <td>Tyulor</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
</tbody>
</table>

Answer 3

尝试：

tr[data-parent=""]:nth-child(even) {background: #CCC}

这将用data-parent=""灰色颜色为每个偶数tr颜色。另外，由于其简单的CSS，排序将相应地改变颜色。