asp.net-mvc - 在 asp.net mvc razor 循环中为行替换颜色

Question

我正在尝试使用 asp.net Mvc3 razor 列表填充数据表，并且我还尝试添加具有交替行颜色的 CSS。有人可以在这部分帮助我吗？只是帮助我在循环中应用 d0 类和 d1 类。

<style>
    tr.d0 td {
        background-color: #CC9999;
        color: black;
    }

    tr.d1 td {
        background-color: #9999CC;
        color: black;
    }
</style>

 <table width="100%">
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Details</th>
        </tr>

        @foreach (var item in Model.Info)
        {     
            <tr>

                <td><span>@item.Name</span></td>
                <td><span>@item.Address</span></td>
                <td><span>@item.Phone</span></td>
                <td><span>@item.Details</span></td>

             </tr>
        }
    </table>

Answer 1

使用普通的 for 循环 -

（未经测试）

@for (int i = 0; i < Model.Info.Count; i++) {
  <tr class= @(i%2 ==0 ? "d0" : "d1")>
      <td><span>@Model.Info[i].Name</span></td>
       .....
  </tr>
}

由于这是一个样式问题而不是渲染内容，那么在奇偶行上使用 jquery 怎么样？

$(document).ready(function () {
    $("table tr:odd").addClass("className"); //make use of more specific css selector
   //likewise for even rows
}

Answer 2

尝试这个

CSS

.generalAltRow {
    background-color:#EFF8FF;
}

.generalRow {
    background-color:white;
}


    @{
        int i=0;
    }
    @foreach (var item in Model.Info)
    {     
        i = i+1;
        string rowColor;
        if (i % 2 == 0)
        {
            rowColor = "generalAltRow";
        }
        else {
            rowColor = "generalRow";
        }

         <tr class="@rowColor">
            <td><span>@item.Name</span></td>
            <td><span>@item.Address</span></td>
            <td><span>@item.Phone</span></td>
            <td><span>@item.Details</span></td>

         </tr>
    }

Answer 3

$(document).ready(function () {
    $('table tr:not(.Header):even').addClass('d0');

    $('table tr:not(.Header):odd').addClass("d1");
});

用于演示