alternating row color MVC

A

8

6

I need to design a table with alternating row colors. Below is written code but its not working. May be some syntax issue for MVC. Please suggest.

@for (int i = 1; i <= 10; i++)

{

        var rowColor = "D9E6C4";
        <tr style="background-color:@rowColor;" >
            <td>apoorva</td>
        </tr>
        if (@rowColor.Equals("#ffffff"))
        {
            rowColor = "#D9E6C4";
        }
        else
        {
            rowColor = "#ffffff";
        }
}

Asha answered 21/12, 2011 at 17:0 Comment(3)

do you know jquery or can you use java script..? – Ow 21/12, 2011 at 17:2

Why don't you just use css for this? – Daphne 21/12, 2011 at 17:3

possible duplicate of How to create zebra stripes on html table without using javascript and even/odd classes generation? – Dareen 15/8, 2012 at 7:18

B

5

Take declaration of rowColor outside for statement.

@{ var rowColor = "D9E6C4"; }
@for (int i = 1; i <= 10; i++)
{
    <tr style="background-color:@rowColor;" >
        <td>
            apoorva
        </td>
    </tr>
    if (@rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }
}

Bowden answered 21/12, 2011 at 17:9 Comment(0)

D

13

CSS3 example taken from http://davidwalsh.name/css-tables-css3-alternate-row-colors

tr:nth-child(odd)    { background-color:#ffffff; }
tr:nth-child(even)    { background-color:#D9E6C4; }

Daphne answered 21/12, 2011 at 17:6 Comment(0)

J

10

Try...

@for (int i = 1; i <= 10; i++)
{
    string rowColor;
    if(i % 2 == 0)
    {
        rowColor = "D9E6C4";
    }
    else
    {
        rowColor = "ffffff";
    }
    <tr style="background-color:#@rowColor;" >
        <td>apoorva</td>
    </tr>
}

Jehad answered 21/12, 2011 at 17:4 Comment(0)

E

5

You should use:

    if (rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }

An alternative is use a mod to choose the color:

    <tr style='background-color:@(i%2 == 0 ? "#D9E6C4":"#ffffff"  );'>
        <td>apoorva</td>
    </tr>

Equipment answered 21/12, 2011 at 17:2 Comment(0)

B

5

Take declaration of rowColor outside for statement.

@{ var rowColor = "D9E6C4"; }
@for (int i = 1; i <= 10; i++)
{
    <tr style="background-color:@rowColor;" >
        <td>
            apoorva
        </td>
    </tr>
    if (@rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }
}

Bowden answered 21/12, 2011 at 17:9 Comment(0)

B

3

This seems like a pretty basic error: each time through the loop, you're setting the value. Just move the initial set outside the loop:

var rowColor = "#D9E6C4";
@for (int i = 1; i <= 10; i++)
{
    <tr style="background-color:@rowColor;" >
        <td>apoorva</td>
    </tr>
    if (@rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }
}

Edit: @jcreamer898 suggestion to use i % 2 is better than checking the color values.

Edit: initialize initial variable with the same value like in if condition

Bankston answered 21/12, 2011 at 17:6 Comment(0)

K

3

use css in your style

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Kalmuck answered 16/2, 2013 at 12:12 Comment(0)

O

2

<html>
    <head>
        <title>Example Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('tr:even').addClass('alt-row-class');
            });
        </script>
    </head>
    <body>...</body>
</html>

Then apply style to that class using standard css:

.alt-row-class { background-color: green; }

referenced form this previous post - https://stackoverflow.com/posts/663122/edit

Ow answered 21/12, 2011 at 17:3 Comment(0)

A

1

@{

 string rowColor = "#D9E6C4";   
 <table>
@for (int i = 1; i <= 10; i++)
{
        <tr style="background-color:@rowColor;" >
            <td>apoorva</td>
        </tr>
       rowColor = rowColor == "#D9E6C4" ? "#FFFFFF" : "#D9E6C4";
}
</table>
}

Amianthus answered 21/12, 2011 at 17:16 Comment(0)

Recommended topics

Hot tags