各行的CSS背景颜色

Question

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

<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>

Answer 1

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

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样式。

Answer 2

你可以拥有你的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/

Answer 3

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

或者这篇文章 - Apply different background color using jquery

Answer 4

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

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

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

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

Answer 5

基本上你有两个选择。

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

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

Answer 6

我宁愿填写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 }