Alternando los colores de la fila de la tabla en freemarker

Question

¿Cuál es una manera buena y sencilla de tener una fila de colores alternativa con freemarker?

¿Es esta la mejor manera?

<#assign row=0> 
<#list items as item> 
    <#if (row % 2) == 0> 
     <#assign bgcolor="green"> 
    <#else> 
     <#assign bgcolor="red"> 
    </#if> 
    <tr style='background-color: ${bgcolor}'><td>${item}</td></tr> 
    <#assign row = row + 1> 
</#list> 

He intentado hacer esto:

<#assign row=0> 
<#list items as item> 
    <tr style='background-color: ${(row % 2) == 0 ? "green" : "blue"}'><td>${item}</td></tr> 
    <#assign row = row + 1> 
</#list> 

Pero al parecer, no puede el usuario operador ternario en ese país.

Nota: supongo que debería haberlo mencionado antes, pero no puedo utilizar las clases CSS o Javascript, ya que esto va HTML en un mensaje de correo electrónico.

Answer 1

Si tiene una serie de tablas es posible que desee realizar una pequeña función.

<#function zebra index> 
    <#if (index % 2) == 0> 
    <#return "white" /> 
    <#else> 
    <#return "#efefef" /> 
    </#if> 
</#function> 

<#assign arr=["a","b","c","d"] /> 
<table> 
<#list arr as n> 
    <tr><td bgcolor=${zebra(n_index)}>${n}</td></tr> 
</#list> 
</table> 

y la _index builtin cuando se utiliza la lista le ahorra de tener que realizar e incrementar una variable índice usted mismo.

Answer 2

Hmmm ... bien, este es el mejor que he llegado con:

<#assign row=0> 
<#list items as item> 
    <tr style='background-color: <#if (row % 2) == 0>green<#else>red</#if>'><td>${item}</td></tr> 
    <#assign row = row + 1> 
</#list> 

Desde el silencio ensordecedor deduzco que no hay manera más agradable de hacer esto.

Answer 3

Usando FreeMarker, hay formas limitadas de responder a esta pregunta, pero si usted está queriendo utilizar CSS solos (que todavía permite la separación de las preocupaciones), entonces aquí es una manera:

Ponga lo siguiente en su hoja de estilo:

tr.linea { 
    background-color: #CC9999; color: black; 
} 
tr.lineb { 
    background-color: #9999CC; color: black; 
} 

continuación, utilizar el tr clase siguiente para definir líneas alternas:

<table> 
<tr class="linea"><td>One Fish</td></tr> 
<tr class="lineb"><td>Two Fish</td></tr> 
<tr class="linea"><td>Red Fish</td></tr> 
<tr class="lineb"><td>Blue Fish</td></tr> 
</table> 

Hay many resources para elegir también.

Editar: Si su HTML entra en un correo electrónico, entonces no puede estar seguro de que el cliente de correo electrónico del cliente permita el HTML que esté tratando de poner en él. Su mejor apuesta en ese momento es usar FreeMarker de manera similar a como lo tiene, excepto que necesita eliminar la etiqueta style, y usar colores para cada fila usando bgcolor="color" en sus etiquetas <tr>.

Answer 4

Una solución entonces se reduce a esto:

<style> 
.rowon { 
background-color:#dedede; 
} 

.rowoff{ 

} 
</style> 

En su plantilla:

<#list items as item> 
    <tr class="<#if item_index % 2 ==0>rowon<#else>rowoff</#if>"><td>${item}</td></tr> 
</#list> 

Sin embargo, como se ha dicho en una respuesta anterior, se puede hacer esto con CSS, sin que esta solución FreeMarker (ver http://www.w3.org/Style/Examples/007/evenodd):

<style> 
.striped tr:nth-child(odd) {background: #eee} 
.striped tr:nth-child(even) {background: #fefefe} 
</style> 

Y a continuación, sólo tiene que utilizar una tabla normal sin classe s en las filas:

<table class="striped"> 
<tr><td>hello</td></tr> 
<tr><td>hello</td></tr> 
<tr><td>hello</td></tr> 
<tr><td>hello</td></tr> 
</table> 

O con una tabla generada FreeMarker:

<table class="striped"> 
<#list items as item> 
    <tr><td>${item}</td></tr> 
</#list> 
</table> 

Así que todo está en el CSS.

Answer 5

Con FreeMarker, puede utilizar la string incorporada:

<#list items as item> 
    <tr style='background-color: ${((item_index % 2)==0)?string("green", "blue")}'><td>${item}</td></tr> 
</#list> 

Answer 6

class='${["odd", "even"][item_index%2]}' 

Answer 7

Puede simular operador ternario en FreeMarker utilizando la siguiente construcción: $ {? Condición de cadena (result_for_true, result_for_false)} .

<#assign arr=["a","b","c","d"] /> 
<table> 
<#list arr as n> 
    <tr><td bgcolor=${((index % 2) == 0)?string("white", "#efefef")}>${n}</td></tr> 
</#list> 
</table> 

Answer 8

En FreeMarker 2.3.23:

<#list items as item> 
    <tr style='background-color: ${item?item_cycle('green', 'red')}'><td>${item}</td></tr> 
</#list>