在视图中显示的结果表中，用不同的颜色为所有偶数项上色

Color all even items in a different color in a result table shown in a view

本文关键字：颜色 结果 显示 视图      更新时间：2023-09-26

我正在构建一个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都受到了影响，包括<table>下面的第一个<tr>，但是我想忽略它，我怎么做呢?我试图把ID单独放在<tr>在for循环，但它不起作用…

CSS3

css3可以帮助你。进入w3schools，阅读":n -of-type"伪选择器，或者在这里查看它的实际操作

我将推荐解决方案1，因为我认为这是一个更好的实践。

注意:两种解决方案都假设"itemID"在任何时候都不相同，因此我们必须基于其他标准来选择元素。这就是我在<table>标签中添加"item-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>标签。这对于跳过标题并应用其他样式很有用。有关更多信息，请参阅element + element参考。

提示:您还可以使用:first-child伪选择器将样式仅应用于标题，如下所示:

.item-table tr:first-child {
    /* styles for the header row */
}
解决方案2:修改jQuery查询的选择器
$('table.item-table tr:even').css({ /* some styles here */ })

给循环的tr指定一个特定的类。

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

然后你可以这样定位:

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

专一性是你的朋友

像这样改变你的jQuery选择器:

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

或者直接把它放在你的CSS中:

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

有几种不同的方法。使用纯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>
}

当i是否成对时，只需设置不同的颜色:

color = i % 2 == 0 ? color_1 : color_2
相关文章：