Question

HTML：

<table class="table_database_edit">
<tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
<tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
</table>

CSS：

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tr:nth-child(4n+3), table.table_database_edit  tr:nth-child(4n+4){
    background-color: #EFF0F1;
}
table.table_database_edit  tr:hover:nth-child(n) + tr:nth-child(n):after{
    background-color: #FFFFCC;
}
table.table_database_edit  tr:hover:nth-child(n+1) + tr:nth-child(n+1):before{
    background-color: #FFFFCC;
}

我有桌子。每两行都是一组。这些组交替背景颜色。第1行和第2行是白色的。第3行和第4行是灰色的。第5行和第6行是白色的。等

当您将鼠标悬停在某个组上时，我想将背景颜色设置为黄色。我怎么能这样做？

Answer 1

您正在寻找的是tbody。 tbody元素与colgroup类似，但用于对行进行分组。从那里，CSS很简单：

<table class="table_database_edit">
    <tbody>
        <tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>

    <tbody>
        <tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>
</table>

CSS：

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tbody:nth-child(odd) tr {
    background-color: #EFF0F1;
}

table.table_database_edit  tbody:hover tr {
    background-color: #FFFFCC;
}

http://jsfiddle.net/rqJAY/13/

Answer 2

您必须修改HTML或使用javascript。我想到了这一点，我认为答案是'不'，原因有一个。

CSS中没有'previous sibling'选择器。您在示例代码中使用before和after，但这些pseduo选择器用于插入内容，而不是用于修改兄弟节点的CSS属性。

最接近的是相邻的兄弟组合子，但它只选择下一个兄弟。有no previous sibling selector可用。因此，您可以在第一行上突出显示两行，但在第二行时不突出显示第一行。

http://jsfiddle.net/rqJAY/2/

我考虑过使用课程，但同样缺乏先前的兄弟组合器会造成灾难。除非您为每个分组指定了一个独特的类。这将导致大量冗余的html和css。

您需要修改HTML或使用javascript。如果您可以修改HTML，我会放弃该表并使用div代替。如果你可以使用javascript，那么实现它是相对简单的。

- 编辑

我没有意识到你可以在一个表中声明多个tbody。如果你可以修改html，这肯定是要走的路。

Answer 3

不确定这是否正是您正在寻找的，但这是使用jQuery和CSS的解决方案。这将是一个更好的跨浏览器解决方案，因为CSS：所有主流浏览器都不支持nth-child。

jQuery的：

//Add group classes to rows
$('table.table_database_edit tr').each(function () {
    if ($('.table_database_edit tr').index($(this)) + 1 !== 1 && ($('.table_database_edit tr').index($(this)) + 1) % 4 === 0) {
        $(this).removeClass('groupOne').addClass('groupTwo');
        $(this).prev().removeClass('groupOne').addClass('groupTwo');
    } else {
        $(this).addClass('groupOne');
        $(this).next().addClass('groupOne');
    }
});

//Highlight groups of two
$('table.table_database_edit tr').hover(function () {
    if ($('.table_database_edit tr').index($(this)) === 0 || $('.table_database_edit tr').index($(this)) % 2 === 0) {
        $(this).addClass('highlight');
        $(this).next().addClass('highlight');
    } else {
        $(this).addClass('highlight');
        $(this).prev().addClass('highlight');
    }
}, function () {
    $('.table_database_edit tr').removeClass('highlight');
});

CSS：

table.table_database_edit {
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit tr.groupOne {
    background-color: #fff;
}
table.table_database_edit tr.groupTwo {
    background-color: #EFF0F1;
}
table.table_database_edit tr.highlight {
    background-color: yellow;
}

如果您需要我调整它，请告诉我！

完整解决方案：Updated JSFiddle - Unlimited Grouping

将此+后和此（n + 1）和之前悬停

3 个答案: