[ACCEPTED]-Alternating table row colors in freemarker-freemarker

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

0

If you have a series of tables you might 3 want to make a little function.

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

and the _index builtin when 2 using list saves you from having to make 1 and increment an index variable yourself.

With freemarker, you can use the string built-in:

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

0

Hmmm... OK, this is the best I've come up 2 with:

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

From the deafening silence I deduce 1 there's no nicer way of doing this.

A solution then boils down to this:

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

.rowoff{

}
</style>

In your 6 template:

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

However, as stated in a previous 5 reply, you can do this with CSS, without 4 this freemarker solution (see http://www.w3.org/Style/Examples/007/evenodd):

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

And then 3 just use a normal table without classes 2 on the rows:

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

OR with a freemarker generated 1 table:

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

So it is all in the CSS.

In FreeMarker 2.3.23:

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

0

Using FreeMarker, there are limited ways 12 of answering this question, but if you're 11 wanting to use CSS alone (Which still allows 10 separation of concerns), then here's one 9 way:

Put the following in your stylesheet:

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

Then use the following tr class to define alternate lines:

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

There are many resources to choose from as well.

Edit: If 8 your HTML is going into an email, then you 7 can't be sure that the client's email client 6 will allow whatever HTML you're trying to 5 put into it. Your best bet at that point 4 is to use FreeMarker similiar to how you 3 have it, except that you need to remove 2 the style tag, and use colors for each row using 1 bgcolor="color" in your <tr> tags.

You can simulate ternary operator in FreeMarker 1 using the following construction: ${condition?string(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>