Cores Dinâmicas no Background de uma table

Question

Pessoal tenho uma página que exibe os dados de uma tabela, ao apresentar essa tabela queria intercalar as cores da mesma para cada linha da mesma.

Abaixo segue o código do projeto.

@model IEnumerable<WebLoja2.Models.Treinamento>
@{
    ViewBag.Title = "Index";
}

<h2>Treinamentos Presenciais</h2>
<table class="table" id="alter">
   
        <tr style="background:#808080">
            <th>
                <b>Treinamento</b>
            </th>
            <th>
                <b>Início</b>
            </th>
            <th>
                <b>Término</b>
            </th>
            <th>
                <b>Preço</b>
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Desconto)
            </th>
            <td>
                <b>Preço Final</b>
            </td>
            <th>
                @Html.DisplayNameFor(model => model.Local)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model)
    {      
         <tr>
            <td>
                @Html.DisplayFor(modelItem => item.NomeTreinamento)
            </td>
            
            <td>
                @Html.DisplayFor(modelItem => item.Inicio)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Termino)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Preco)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Desconto)
            </td>

            <td>
               @{ 
                   decimal result = item.Preco - item.Desconto;
               }
                @Html.DisplayFor(modelItem => result)

            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Local)
            </td>
            <td></td>
        </tr>
    
    }
</table>

Isso gera a imagem abaixo:

Oque falta fazer é alterar as cores do background dentro do Foreach . sendo que para cada item listado um seria branco e outro cinza claro.

Answer 1

Olá Tiago,

Você pode fazer utilizando um bool e invertendo seu estado a cada iteração:

@model IEnumerable<WebLoja2.Models.Treinamento>
@{
    ViewBag.Title = "Index";
}

<h2>Treinamentos Presenciais</h2>
<table class="table" id="alter">
   
        <tr style="background:#808080">
            <th>
                <b>Treinamento</b>
            </th>
            <th>
                <b>Início</b>
            </th>
            <th>
                <b>Término</b>
            </th>
            <th>
                <b>Preço</b>
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Desconto)
            </th>
            <td>
                <b>Preço Final</b>
            </td>
            <th>
                @Html.DisplayNameFor(model => model.Local)
            </th>
            <th></th>
        </tr>
    
  @{
    var altRow = false;
    foreach (var item in Model)
    {      
         <tr style='background-color:@(altRow? "#fff": "#f6f6f6");'>
            <td>
                @Html.DisplayFor(modelItem => item.NomeTreinamento)
            </td>
            
            <td>
                @Html.DisplayFor(modelItem => item.Inicio)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Termino)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Preco)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Desconto)
            </td>

            <td>
               @{ 
                   decimal result = item.Preco - item.Desconto;
               }
                @Html.DisplayFor(modelItem => result)

            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Local)
            </td>
            <td></td>
        </tr>
        altRow = !altRow;
    }
   }
</table>

Valeu!

---

Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta!

André Secco
Microsoft MSP & MSDN Tech Advisor
Blog: http://andresecco.com.br
GitHub: http://github.com/andreluizsecco
Twitter: @andre_secco

Answer 2

Obrigado amigo.