Question

我正在使用＆lt;％foreach ...％＆gt;循环列出我网站上的一系列项目。

我想为列表中交替行的样式添加不同的背景颜色。我找到了一种方法来做到这一点，但我对它不满意，因为它看起来像是一个黑客。

到目前为止，我已经采取了以下措施来解决这个问题：

<table>
  <% int counter = 0; 
      foreach (var item in Model)
      {
          counter++;

          if (counter % 2 == 0)
          {
   %>
          <tr class="colorfull">
          <% }
          else
          { %>
          <tr>
          <% } %>
...

我是否缺少人们在ASP.NET MVC中用于此场景的最佳实践？

Answer 1

我找到了这个JQuery代码片段，我发现它更清晰。

$(document).ready(function() { $("table tr:nth-child(odd)").addClass("colorfull"); });

我已经取出了反逻辑。这个JQuery脚本操纵DOM来设置foreach循环中每隔一行的css类。

Answer 2

如果你是敢于深入CSS3的大胆类型

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

Answer 3

如果您想要更干净，我建议您编写自定义HtmlHelper扩展程序。我不会使用jquery作为stu42建议只是因为我喜欢纯粹为了行为而寻求javascript。理想情况下，希望在不久的将来，您可以使用纯css来实现此目的。在那之前，我将它留在标记中，正如您当前所做的那样，但是使用扩展来处理逻辑，将其从aspx中拉出来。

Answer 4

如果您不想使用类，可以使用jquery直接设置css。

假设您的表格标记为：<table id="tb">...，您只需按照以下方式设置html：

<head>
<script language="javascript" type="text/javascript" src="jquery-min.js"/>
</head>

<body>
    <script language="javascript" type="text/javascript">
    $(document).ready(function() { 
        $("#tb tr:odd").css("background-color", "#F4F4F8"); 
    });
    </script>

    <table id="tb">
        <tr><th>Id</th><th>Name</th></tr>
        <tr><td>1</td><td>Junior</td></tr>
        <!--more rows here... -->
    </table>
</body>

如何在asp.net mvc中设置交替行的样式

4 个答案: