1

ページに次のテーブルを設定しています。

<div id="schedule">
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr class="tableDate">
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
    <table class="tableListings">
        <tbody>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

のクラスを持つを持たないにのみ背景色を設定する必要があります。<td><table><tr>"tableDate"

どうやってやるの？

純粋に CSS でこれを行うことができれば望ましいですが、より簡単 (または必要) な場合は、jQuery を代わりに使用することもできます。

4

5 に答える 5

6

この CSS を試してください: {単純なケースの場合}

table tr:not(.tableDate) td{
   background-color:red;
}
于 2013-05-06T14:09:35.613 に答える
3

私が正しく理解していれば：

$('td').filter(function(){
    return !$(this).closest('table').find('tr.tableDate').length;
}).css('background-color', '#00f');

すべての要素を選択し、最も近い祖先にのクラスを持つ要素がないtdかどうかに従ってそれらをフィルタリングします。tabletrtableDate

ただし、親にクラスがある場合にのみ必要な場合tr（そのクラスで全体tableをチェックしない場合tr）：

$('td').filter(function(){
    return !$(this).closest('tr.tableDate');
}).css('background-color', '#00f');

(互換性の理由を除いて) を使用できない理由がわかりません:not(.tableDate)が、ブラウザー間の互換性のためです。

td {
    background-color: #00f; /* special colour for non-.tableDate descendants */
}

.tableDate td {
    background-color: #fff; /* to override the 'special' colour for those td
                               elements that *are* within a .tableDate element */
}
于 2013-05-06T14:08:10.810 に答える
2

これを試して。それはあなたを助けるでしょう.....

        table tr:not(.tableDate) td{
            background-color: yellow;
        }
于 2013-05-06T14:15:31.140 に答える
2

CSS

tr
{
 background-color:blue;   
}
.tableDate
{
     background-color:white;
}

ワーキングデモhttp://jsfiddle.net/cse_tushar/X9rhS/

于 2013-05-06T14:10:19.507 に答える
2

CSS(3) のみのソリューションが必要な場合は、次を試してください。

table.tableListings tr:not(.tableDate) td {
    background-color:#999;
}

jsFiddle の例

于 2013-05-06T14:12:13.197 に答える