Como as cores da linha da tabela HTML alternativa usando JSP?

Question

Como faço para cores de linha da tabela HTML alternativo usando JSP?

O meu CSS é algo como:

tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}

Eu quero usar <c:forEach> para iterar sobre uma coleção.

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

Eu preciso de uma variável de contagem int / ou ímpar boolean mesmo variável para controlar a linha. Então minha tag <tr> seria algo parecido com:

<tr class="odd or even depending on the row">

Answer 1

Use o atributo varStatus em seu tag forEach e JSTL irá gerenciar uma instância de uma javax.servlet.jsp.jstl.core.LoopTagStatus para você no nome da variável que você especificar.

Você pode então usar um operador ternário facilmente a saída do nome de classe apropriado:

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>

Este JSTL cartilha da IBM tem mais informações sobre o core biblioteca de marcas eo que ele lhe dá.

Answer 2

Se você está disposto a fazer isso acontecer no lado do cliente, você pode fazer Zebra Striping com JQuery.

Seria feito com apenas algumas linhas de código, mas você teria que incluir a biblioteca jQuery em seu arquivo.

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

http://docs.jquery.com/Selectors/odd

http://docs.jquery.com/Selectors/even

Answer 3

(esta resposta apenas diz respeito ao lado do CSS das coisas ...)

Por uma questão de curso, eu sempre como alvo o TD criança é assim:

tr.odd td {}
tr.even td {}

A razão é que o IE realmente se aplica TR background-color, removendo o valor definido na TR e aplicá-lo a cada TD indivíduo dentro desse TR. Às vezes você pode ter uma redefinição de CSS ou outras regras css que substitui estranha forma de IE de fazer TR background-color, por isso esta é uma maneira de certificar-se evitar isso.

Além disso, você pode querer considerar a criação apenas

tr td {background-color: #EEDDEE}

e

tr.odd td {background-color: #EEEEDD}

para que o seu código é um pouco menos detalhada

Answer 4

Basta fazer assim e vai trabalho:

table tr:nth-child(odd) { background-color: #ccc; }

Answer 5

Não uso JSP, então não posso dar-lhe uma resposta em seu idioma, mas aqui está o que eu faço (usando o código pseudo)

counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>

Pessoalmente, eu nomear as classes "row0" e "ROW1", que permite alternar entre eles com um cálculo simples módulo, também, se você decidir ter linhas alternadas em triplos ou quádruplos (em vez de pares), você pode facilmente estendê-lo para row2, row3 e alterar o código de saída a ser counter % 4, etc.

Answer 6

Eu usei um operador ternário em casos como este. Seria algo como:

String oddEven="";
<c:forEach items="${element}" var="myCollection">
    oddEven = (oddEven == "even") ? "odd" : "even";
    <tr class='"'+oddEven+'"'>
        <td><c:out value="${element.field}"/></td>
        ...
    </tr>
</c:forEach>