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

【问题标题】：How to style alternating rows in asp.net mvc如何在asp.net mvc中设置交替行的样式
【发布时间】：2010-12-07 21:19:11
【问题描述】：

我正在使用循环来列出我网站上的项目集合。

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

到目前为止，这是我为解决它所做的工作：

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

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

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

【问题讨论】：

标签： jquery html asp.net-mvc stylesheet

【解决方案1】：

我发现了这个 JQuery 代码的 sn-p，我觉得它更干净。

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

我已经取出了计数器逻辑。此 JQuery 脚本操作 DOM 以设置 foreach 循环中每隔一行的 css 类。

【讨论】：

我推荐这个，没有标签汤给你！
我在许多类似的问题中看到过这句话重复，但总是断章取意。你会把这个放在哪里？（我对 mvc、jquery 和 web 开发很陌生！）

【解决方案2】：

如果您希望它更简洁，我建议您编写一个自定义的 HtmlHelper 扩展名。我不会像 stu42 所建议的那样使用 jquery，因为我喜欢纯粹为了行为而使用 javascript。理想情况下，并希望在不久的将来，您会为此目的使用纯 css。在那之前，我会把它留在标记中，就像你目前正在做的那样，但有一个处理逻辑的扩展，将它从 aspx 中拉出来。

【讨论】：

你能举一个例子说明这可能是什么样子吗？

【解决方案3】：

如果你是想深入研究 CSS3 的大胆类型

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

【讨论】：

在 firefox、chrome 中工作，但在 IE 中不工作 :(
甚至不在 IE 8 中？ O 自己没有在 IE 8 上进行过测试，但我想它会......服务包！

【解决方案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>

【讨论】：