CSS background color of individual rows

Question

I found many articles online about coloring alternate table rows. what about if I want use different colors for individual rows, how can I do that?

<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

You can have in your css

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

See demo http://jsfiddle.net/wnCgL/

Edit

with jQuery, using a random color function

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

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

Answer 2

For example like this. Define some enumm or you can later generate colors by random:

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

then in markup file get random color from enum

@{ 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>
     } 
}

Update: Or if you want to make it more readable for users use odd and even css styles.

Answer 3

Check this fiddle - http://jsfiddle.net/r74j6/6/

Or this post - Apply different background color using jquery