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");
});

DEMO

asp.net mvc razor循环中行的替代颜色

3 个答案: