none
Cores Dinâmicas no Background de uma table RRS feed

  • Pergunta

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

    quarta-feira, 24 de agosto de 2016 18:00

Respostas

  • 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


    quarta-feira, 24 de agosto de 2016 18:13

Todas as Respostas

  • 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


    quarta-feira, 24 de agosto de 2016 18:13
  • Obrigado amigo.
    quarta-feira, 24 de agosto de 2016 18:24