6

jsfiddle.net/rqJAY/

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 行是白色的。等等。

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

4

3 回答 3

6

您正在寻找的是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/

于 2013-01-28T00:40:14.980 回答
1

您将不得不修改您的 HTML 或使用 javascript。我考虑了一下，我认为答案是“不”，原因有一个。

CSS 中没有“上一个兄弟”选择器。您在示例代码中使用beforeand after，但这些伪选择器用于插入内容，而不是用于修改兄弟姐妹的 CSS 属性。

最接近的是相邻的兄弟组合器，但它只选择下一个兄弟。没有可用的先前兄弟选择器。因此，您可以在超过第一行时突出显示两行，但在超过第二行时不能突出显示第一行。

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

我考虑过使用类，但缺少以前的同级组合器再次造成灾难。除非你做了一些事情，比如为每个分组分配一个唯一的类。这将导致大量多余的 html 和 css。

您将需要修改 HTML 或使用 javascript。如果您可以修改 HTML，我会放弃表格并改用 div。如果您可以使用javascript，则实现起来相对简单。

- 编辑

我没有意识到你可以在一个表中声明多个 tbody。如果您可以修改 html，这绝对是可行的方法。

于 2013-01-27T22:54:52.987 回答
0

不确定这是否正是您正在寻找的，但这里有一个使用 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;
}

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

完整解决方案：更新 JSFiddle - 无限分组

于 2013-01-27T22:54:44.967 回答