Цвета чередующихся строк таблицы в freemarker

Question

Какой хороший, простой способ иметь альтернативную раскраску строк с помощью freemarker ?

Это действительно лучший способ?

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

Я пытался сделать это:

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

Но, очевидно, вы не можете использовать там троичного оператора.

Примечание : Полагаю, я должен был упомянуть об этом раньше, но я не могу использовать классы CSS или JavaScript, поскольку этот HTML-код входит в сообщение электронной почты.

Answer 1

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

Answer 2

Если у вас есть серия таблиц, вы можете сделать небольшую функцию.

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

и встроенная функция _index при использовании списка избавляет вас от необходимости самостоятельно создавать и увеличивать индексную переменную.

Answer 3

С помощью бесплатного маркера вы можете использовать встроенный string:

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

Answer 4

Хммм ... Хорошо, это лучшее, что я придумал:

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

Из оглушительного молчания я понимаю, что нет более приятного способа сделать это.

Answer 5

В FreeMarker 2.3.23:

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

Answer 6

Затем решение сводится к следующему:

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

.rowoff{

}
</style>

В вашем шаблоне:

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

Однако, как было указано в предыдущем ответе, вы можете сделать это с помощью CSS, без этого решения freemarker (см. http://www.w3.org/Style/Examples/007/evenodd):

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

А затем просто используйте обычную таблицу без классов в строках:

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

ИЛИ с таблицей, сгенерированной freemarker:

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

Так что все это в CSS.

Answer 7

Вы можете смоделировать троичного оператора в FreeMarker, используя следующую конструкцию: $ {условие? строка (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

Используя FreeMarker, есть ограниченные способы ответить на этот вопрос, но если вы хотите использовать только CSS (который по-прежнему допускает разделение интересов), то вот один из способов:

Добавьте в таблицу стилей следующее:

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

Затем используйте следующий класс tr для определения альтернативных строк :

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

Есть много ресурсов на выбор.

Редактировать : Если ваш HTML входит в электронное письмо, вы не можете быть уверены, что почтовый клиент клиента разрешит вводить в него любой HTML-код. Лучше всего в этот момент использовать FreeMarker, похожий на тот, который у вас есть, за исключением того, что вам нужно удалить тег style и использовать цвета для каждой строки, используя bgcolor="color" в тегах <tr>.