CSS3

Question

我正在构建一个MVC应用程序，其中项目显示在表格中。

以下是视图中包含的表格示例：

<table id="itemsID">
    <tr>
        <th>Obj Name</th>
        <th>Number</th>
        <th>Amount</th>
        <th>Size</th>
        <th>Prize</th>
    </tr>
    @for (int i = 0; i < Model.Count; i++)
    {
        <tr>
            <td>
                @Html.DisplayFor(model => model[i].m_ObjName)
            </td>
            <td>
                @Html.DisplayFor(model => model[i].m_Number)
            </td>
            <td>
                @Html.DisplayFor(model => model[i].m_Amount)
            </td>
            <td>
                @Html.DisplayFor(model => model[i].m_Size)
            </td>
            <td>
                @Html.DisplayFor(model => model[i].m_Prize)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = Model[i].m_ObjID}) |
                @Html.ActionLink("Details", "Details", new { id = Model[i].m_ObjID}) |
                @Html.ActionLink("Delete", "Delete", new { id = Model[i].m_ObjID })
            </td>
        </tr>
    }
</table>

我要做的是为for循环中的每个项目着色，这个数字是偶数/奇数。到目前为止，我已经编写了一个部分有效的简短javascript：

$("#results tr:even").css("background-color", "#FFFFFF");;

简单但显然它会影响页面中的所有项目，而不会影响for循环中显示的项目。我如何具体针对这些项目？

修改

基于每个人的善意解释，我已经对代码进行了修改。现在结果列表中的所有偶数tr都会受到影响，包括<tr>下的第一个<table>，但是我希望它被忽略，我该怎么做？我试图将ID仅仅放在for循环中的<tr>上，但它不起作用......

Answer 1

CSS3

css3可以帮到你。通往w3schools并阅读the ":nth-of-type" pseudo selector或阅读here

我会推荐解决方案1，因为我觉得这是一种更好的做法。

注意：两种解决方案都假定“itemID”始终不一样，因此我们必须将元素选择基于其他条件。这就是我将“item-table”类添加到<table>标记的原因。

两种解决方案的HTML

<table id="itemsID" class="item-table">
  <tr>
    <!-- header field names go here  -->
  </tr>
  @for (int i = 0; i < Item.Count; i++)
  {
    <tr>
        <!-- each item's properties go here -->
    </tr>
  }

解决方案1：在样式表（推荐）上进行

.item-table tr + tr:nth-of-type(even) {
    /* styles for the even rows */
}
.item-table tr + tr:nth-of-type(odd) {
    /* styles for the odd rows */
}

注意：tr + tr选择第一个之后的所有<tr>标记。这对跳过标题并对其应用其他样式很有用。有关详细信息see the element + element reference。

提示：您还可以仅使用:first-child pseudo selector将标题应用于标题，如下所示：

.item-table tr:first-child {
    /* styles for the header row */
}

解决方案2：修改jQuery查询的选择器

$('table.item-table tr:even').css({ /* some styles here */ })

Answer 2

更改你的jQuery选择器：

$("#itemsID tr:even").css("background-color", "#FFFFFF");

或者只是把它放在你的CSS中：

#itemsID tr:nth-child(even) { background-color: #FFFFFF; }

Answer 3

给循环TRs一个特定的类。

<tr class="my_special_row">
    <td></td>... etc
</tr>

然后你可以这样定位：

$("tr.my_special_row:even").css("background-color", "#FFFFFF");

特异性是你的朋友。

Answer 4

有几种不同的方式。使用纯CSS，它（我建议）：

#itemsID tr:nth-child(even)
{
    background-color: #eee;
}

或者您可以将一个类应用于for循环中的偶数行：

@for (int i = 0; i < Model.Count; i++)
{
    var className = i % 2 == 0 ? "even" : "odd";

    <tr class="@className">
        ...
    </tr>
}

Answer 5

只需在i配对时设置不同的颜色：

color = i % 2 == 0 ? color_1 : color_2

在视图中显示的结果表中为所有颜色均匀的项目着色

5 个答案:

CSS3

解决方案1：在样式表（推荐）上进行

解决方案2：修改jQuery查询的选择器