如何在可折叠表中将备用表行着色?

时间:2017-04-27 18:49:19

标签: jquery html css

更新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=""对行进行排序也应该有替代的行颜色。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

FINAL EDIT:使数据父属性为空

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

答案 2 :(得分:0)

尝试:

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

这会使每个偶数tr的颜色为data-parent=""灰色。此外,由于它的简单css,排序将相应地改变颜色。