цвет чередующегося ряда MVC - PullRequest
Новая
       18

цвет чередующегося ряда MVC

6 голосов
/ 21 декабря 2011

Мне нужно оформить таблицу с чередующимися цветами строк.Ниже написан код, но он не работает.Может быть какая-то проблема синтаксиса для MVC.Пожалуйста, предложите. 

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

Ответы [ 8 ]

11 голосов
/ 21 декабря 2011

CSS3 пример взят из http://davidwalsh.name/css-tables-css3-alternate-row-colors

tr:nth-child(odd)    { background-color:#ffffff; }
tr:nth-child(even)    { background-color:#D9E6C4; }
10 голосов
/ 21 декабря 2011

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>
}
5 голосов
/ 21 декабря 2011

Возьмите декларацию rowColor снаружи для выписки. 

@{ 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";
    }
}
4 голосов
/ 21 декабря 2011

Вы должны использовать: 

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

Альтернативой является использование мода для выбора цвета: 

    <tr style='background-color:@(i%2 == 0 ? "#D9E6C4":"#ffffff"  );'>
        <td>apoorva</td>
    </tr>
3 голосов
/ 16 февраля 2013

используйте css в вашем стиле

tr: nth-child (четный) {background: #CCC}
tr: nth-child (odd) {background: #FFF}

3 голосов
/ 21 декабря 2011

Это кажется довольно простой ошибкой: каждый раз в цикле вы устанавливаете значение. Просто переместите начальный набор за пределы цикла: 

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

Редактировать: @ jcreamer898 предложение использовать i% 2 лучше, чем проверка значений цвета.

2 голосов
/ 21 декабря 2011 
<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>

Затем примените стиль к этому классу, используя стандартную CSS: 

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

ссылка на этот пост - https://stackoverflow.com/posts/663122/edit

1 голос
/ 21 декабря 2011 
@{

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