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;
}

私はテーブルを持っています。2行ごとにグループがあります。グループは背景色を交互に変えます。行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を使用する必要があります。これについて少し考えましたが、1つの理由で答えは「いいえ」だと思います。

CSSには「前の兄弟」セレクターはありません。サンプルコードではとを使用beforeしafterていますが、これらのpseduo-selectorはコンテンツを挿入するためのものであり、兄弟のCSS属性を変更するためのものではありません。

最も近いのは隣接する兄弟コンビネータですが、次の兄弟のみを選択します。以前に使用可能な兄弟セレクターはありません。したがって、最初の行の上にある場合は両方の行を強調表示できますが、2番目の行の上にある場合は最初の行を強調表示できません。

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

クラスを使用することを考えましたが、以前の兄弟コンビネータの欠如は悲惨な結果を招きます。すべてのグループに一意のクラスを割り当てるようなことをしない限り。その結果、多くの冗長なhtmlとcssが生成されます。

HTMLを変更するか、javascriptを使用する必要があります。HTMLを変更できる場合は、テーブルを破棄し、代わりにdivを使用します。javascriptを使用できる場合、実装するのは比較的簡単です。

- 編集

1つのテーブルで複数の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 に答える