Alternanza dei colori delle righe della tabella in freemarker

Question

Qual è un modo semplice e valido per colorare righe alternate con freemarker?

È davvero il modo migliore?

<#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> 

Ho provato a fare questo:

<#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> 

Ma a quanto pare non è possibile all'utente l'operatore ternario in là.

Nota: Credo che avrei dovuto accennarlo prima, ma non posso usare le classi CSS o javascript, poiché questo HTML sta entrando in un messaggio di posta elettronica.

Answer 1

Se si dispone di una serie di tabelle, è consigliabile eseguire una piccola funzione.

<#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> 

e la _index builtin quando si utilizza la lista si evita di dover fare e incrementare una variabile indice te stesso.

Answer 2

Hmmm ... OK, questo è il migliore che è venuta in mente:

<#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> 

Dal silenzio assordante deduco che non c'è modo più bello di fare questo.

Answer 3

Utilizzando FreeMarker, ci sono modi limitati di rispondere a questa domanda, ma se hai intenzione di usare i CSS da solo (che consente ancora la separazione degli interessi), quindi ecco un modo:

Inserire il seguente nella vostra foglio di stile:

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

quindi utilizzare la classe tr seguente per definire linee alternate:

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

Ci sono many resources tra cui scegliere.

Modifica: Se il tuo codice HTML sta entrando in un messaggio di posta elettronica, non puoi essere sicuro che il client di posta del client consentirà qualsiasi codice HTML tu stia cercando di inserire. A questo punto, la soluzione migliore è utilizzare FreeMarker simile a come l'hai, tranne che è necessario rimuovere il tag style e utilizzare i colori per ogni riga utilizzando bgcolor="color" nei tag <tr>.

Answer 4

Una soluzione bolle poi riduce a questo:

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

.rowoff{ 

} 
</style> 

Nel modello:

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

Tuttavia, come dichiarato in una risposta precedente, si può fare questo con i CSS, senza questa soluzione freemarker (vedi http://www.w3.org/Style/Examples/007/evenodd):

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

E poi basta usare un tavolo normale senza classe s sulle righe:

<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 tabella generata freemarker:

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

Quindi è tutto in CSS.

Answer 5

Con freemarker, è possibile utilizzare il string built-in:

<#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

È possibile simulare operatore ternario in FreeMarker utilizzando la seguente costruzione: $ {? Condizione di stringa (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

In FreeMarker 2.3.23:

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