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

Question

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

7

我正在使用 <% foreach ...%> 循环来在我的网站上列出一系列物品。

我想为列表中交替行的样式添加不同的背景颜色。我已经找到了一种方法来实现这一点，但我对它并不满意，因为它似乎是一种hack。

目前为止，我所做的解决方案如下：

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

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

有没有最佳实践在ASP.NET MVC中处理这种情况，我是否遗漏了什么？

- YeahStu

4个回答

5

如果你是敢于尝试CSS3的人

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

- Perpetualcoder

在火狐和谷歌浏览器中可以运行，但是在IE浏览器中不行 :( - Sly

不支持IE 8吗？我自己没有测试过IE 8，但我想它应该支持...服务包！！ - Perpetualcoder

1

如果您不想使用类，可以直接使用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>

- Junior Mayhé

1

如果您想让它更干净，我建议编写自定义的HtmlHelper扩展。我不会像stu42建议的那样使用jquery，因为我只想将javascript用于行为。理想情况下，希望在不久的将来，您将使用纯css来实现此目的。在那之前，我会像您当前所做的那样将其保留在标记中，但使用一个处理逻辑的扩展程序将其从aspx中提取出来。

- dustyburwell

你能提供一个类似的例子吗？ - YeahStu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- YeahStu · Accepted Answer

我发现这段JQuery代码，觉得它更简洁。

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

我已经移除了计数器逻辑。这个 jQuery 脚本通过操作 DOM，在 foreach 循环中设置每一行交替的 CSS 类。