html - 各行的 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

你可以在你的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，使用随机颜色函数

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

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

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

更新：或者，如果您想让用户使用奇数和偶数css 样式 使其更具可读性。

Answer 3

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

或者这篇文章 -使用 jquery 应用不同的背景颜色

Answer 4

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

Answer 5

您可以使用 css 选择器:nth-child，但请检查它的兼容性。

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

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

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

Answer 6

那么基本上你有2个选择。

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

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

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

不同的行颜色 -演示

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

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

交替行 -演示

对于交替行，只需执行以下操作：

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