0

我正在构建一个 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 循环中显示的项目。如何专门针对这些项目？

编辑

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

4

5 回答 5

3

CSS3

css3 可以帮助你。前往 w3schools 并阅读有关":nth-of-type" 伪选择器的信息，或在此处查看它的实际应用

我会推荐解决方案 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>第一个标签之后的所有标签。这对于跳过标题并对其应用其他样式很有用。有关更多信息，请参阅元素 + 元素参考。

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

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

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

$('table.item-table tr:even').css({ /* some styles here */ })
于 2013-04-19T19:14:25.003 回答
1

像这样更改您的 jQuery 选择器：

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

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

#itemsID tr:nth-child(even) { background-color: #FFFFFF; }
于 2013-04-19T19:14:36.663 回答
1

给循环的 TRs 一个特定的类。

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

然后你可以这样定位：

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

特异性是你的朋友。

于 2013-04-19T19:15:34.413 回答
1

有几种不同的方法。使用纯 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>
}
于 2013-04-19T19:38:19.957 回答
0

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

color = i % 2 == 0 ? color_1 : color_2
于 2013-04-19T19:12:35.277 回答