Usuário com melhor resposta
Cores Dinâmicas no Background de uma table

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.
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- Editado André SeccoMVP quarta-feira, 24 de agosto de 2016 18:14
- Marcado como Resposta Tiago Gomes Oliveira quarta-feira, 24 de agosto de 2016 18:23
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- Editado André SeccoMVP quarta-feira, 24 de agosto de 2016 18:14
- Marcado como Resposta Tiago Gomes Oliveira quarta-feira, 24 de agosto de 2016 18:23
-