Question

我有一个用JavaScript生成的表。表中的每一行都可以具有类似于下拉式AJAX的操作，该操作会插入包含记录子元素的嵌套表的行。显然，AJAX只执行一次，其余的展开/折叠动作都是CSS显示/隐藏动画。

<table>
    <thead>
        <tr>
            <th>action</th>
            <th>property A</th>
            <th>property B</th>
        </tr>
    </thead>
    <tbody>
        <!-- not yet requested -->
        <tr>
            <td>show</td>
            <td>some value</td>
            <td>some other value</td>
        </tr>
        <!-- expanded -->
        <tr>
            <td>hide</td>
            <td>some value</td>
            <td>some other value</td>
        </tr>
        <tr>
            <td colspan="3">
                <table>...</table>
            </td>
        </tr>
        <!-- collapsed -->
        <tr>
            <td>show</td>
            <td>some value</td>
            <td>some other value</td>
        </tr>
        <tr style="display:none;">
            <td colspan="3">
                <table>...</table>
            </td>
        </tr>
    </tbody>
</table>

我遇到的问题是桌子颜色的适应性： 1.）我使用tr：nth-child（单数）和tr：nth-child（偶数）选择器。如果嵌套表被隐藏，则有两行具有相同的颜色（多么令人惊讶！）。 2.）行也有.hover选择器，所以当悬停在嵌套表上时，会发生坏事（编辑：这意味着如果行有.hover background-color：red，将鼠标悬停在嵌套表行上会导致嵌套表变为红色，因为它包含在那一行中）

我知道它可以通过JavaScript以编程方式解决，但我想避免这种解决方案。有没有其他方法，如何在不编程添加奇数，偶数和悬停选择器的情况下实现一致的表格？

CSS偶数/奇数行＆amp;嵌套表

0 个答案: