Question

我创建了以下小提琴来展示我想要做的事情。

正如您所看到的，我的编号列表具有交替的颜色，我用它来做这个...

        $(document).ready(function(){
          $("tr:even").css("background-color", "#606060");
          $("tr:odd").css("background-color", "#404040");
        });

这仅影响编号列表。所以，我想要在它右边的列上做一些比编号列表更暗的颜色。我怎么能只触发那些<tr>的？

Answer 1

你是否只看css版本。你可以尝试这样的事情。

- EDIT ---

要获得实际结果，请添加thead和tbody标签。

<table class="draft_border_table">
    <thead>
        <tr>
            <th class="draft_table_number_th">RND</th>
            <th class="draft_table_th">User1</th>
            <th class="draft_table_th">User2</th>
            <th class="draft_table_th">User3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="draftBorder">1</div>
            </td>
            <td class="draft_table_td">Joe - A</td>
            <td class="draft_table_td">Bob - B</td>
            <td class="draft_table_td">Tom - C</td>
        </tr>
        <tr>
            <td>
                <div class="draftBorder">1</div>
            </td>
            <td class="draft_table_td">Betty - B</td>
            <td class="draft_table_td"></td>
            <td class="draft_table_td"></td>
        </tr>
    </tbody>
</table>

.draft_border_table {
    border: 3px solid #606060;
    margin: 50px 5%;
    width: 90%;
    background-color: #404040;
    border-collapse: collapse;
}
.draft_table_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 14%;
    border-collapse: collapse;
    text-align: center;
    font-weight: bold;
    line-height: 2em;
}
.draft_table_number_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 5%;
    border-collapse: collapse;
    text-align: center;
}

td {
    color: #FFFFFF;
    width: 14%;
    text-align: center;
    border: 1px solid black;
}
td > div {
    display: block;
    margin: 15px;
    text-align: center;
    padding: 8px;
    color: #FFFFFF;
}
tr > td{
    background-color: #404040;
}
tr:nth-child(even) > td{
    background-color: #CF000F;
}
tr:nth-child(even) > td:first-child{
    background-color: red;
}

JSFiddle

表格中的交替颜色

1 个答案: