各行的 CSS 背景颜色答案

【问题标题】：CSS background color of individual rows各行的 CSS 背景颜色
【发布时间】：2012-06-04 09:55:41
【问题描述】：

我在网上找到了许多关于为交替表行着色的文章。如果我想为各个行使用不同的颜色，我该怎么做？

<table class="table1">          
<tr>
   <th>Name</th>
   <th>Surname</th>
   <th>Email</th>
</tr>                
 @{ foreach (var p in Model.People)
     {   <tr>
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
  }
</table>

【问题讨论】：

参考这篇文章。它与 jQuery 一起使用，但可以工作 - stackoverflow.com/questions/10540301/…

标签： html css asp.net-mvc

【解决方案1】：

你可以在你的CSS中拥有

.table1 tr:nth-child(1) {    background:blue;           }
.table1 tr:nth-child(2) {    background:red;            }
.table1 tr:nth-child(3) {    background:orange;         }
...

查看演示 http://jsfiddle.net/wnCgL/

编辑

使用 jQuery，使用 random color function

$(function() {
     $('.table1').find('tr').each(
        function() {
          $(this).css('background', get_random_color());  
        });
});

http://jsfiddle.net/wnCgL/1/

【讨论】：

【解决方案2】：

例如像这样。定义一些枚举，或者您以后可以随机生成颜色：

public enum Colors
{
    Blue = 1,
    Red = 2,
    Yellow = 3,
    Pink = 4,
    Green = 5,
}

然后在标记文件中从枚举中获取随机颜色

@{ foreach (var p in Model.People)
     {   <tr style="background-color:@(Colors[new Random().Next(0,Colors.Length)])">
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
}

更新： 或者，如果您想让用户更容易阅读，请使用 odd and even css 样式。

【讨论】：

不要使用这个。要么定义类而不是内联样式，要么按照发布的其他解决方案进行。
总是区分结构和风格！使用 inline-css，直接在编程语言中最糟糕的广告是没有用的。如果你想改变样式，你必须编辑你的代码。
这始终取决于您的目标。我同意你的说法，这使代码清晰，但不太灵活。定义几十个 css 类并不是更好的解决方案。如果只是颜色内联不会损坏任何东西。

【解决方案3】：

检查这个小提琴 - http://jsfiddle.net/r74j6/6/

或者这个帖子 - Apply different background color using jquery

【讨论】：

【解决方案4】：

基本上你有两个选择。

1) 模型属性 - 将类作为每个人的模型属性，这样您就可以将不同的属性分配给不同的人。

2) 纯 CSS - 如果你想要 CSS 路由，只需为不同的选择器指定不同的颜色即可。

就我个人而言，我会选择 2 号。以下是示例：

不同的行颜色 - DEMO

对于每个项目的不同行颜色，您必须执行以下操作：

tr:nth-child(2)
{
    background-color: red;
}
tr:nth-child(3)
{
    background-color: blue;
}
tr:nth-child(4)
{
    background-color: green;
}
tr:nth-child(5)
{
    background-color: yellow;
}
tr:nth-child(6)
{
    background-color: orange;
}
tr:nth-child(7)
{
    background-color: purple;
}

交替行 - DEMO

对于交替行，只需：

tr:not(:nth-child(1)):nth-child(odd) /* excluding first row (header) */
{
    background-color: blue;
}
tr:nth-child(even)
{
    background-color: red;
}

【讨论】：

【解决方案5】：

我宁愿填充 td 的背景色：

.table1 tr:nth-child(1) td { background-color: red }
.table1 tr:nth-child(2) td { background-color: green }
.table1 tr:nth-child(3) td { background-color: blue }

【讨论】：

【解决方案6】：

您可以使用 css 选择器 :nth-child，但请检查它是 compatibility。

tbody tr:nth-child(1) { background-color: #ffc000; }

示例：http://jsfiddle.net/SK4dV/

对于 IE8 及以下您可以通过 JavaScript 添加样式属性或类，或者在生成表格时为每一行添加类并为其添加一些 css 规则。

【讨论】：