8

使用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 将进入电子邮件消息。

4

8 回答 8

27 
class='${["odd", "even"][item_index%2]}'
于 2010-05-19T18:30:43.073 回答
15

如果您有一系列表格，您可能想要创建一个小功能。

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

使用 list 时内置的_index使您不必自己创建和增加索引变量。

于 2009-06-04T21:27:32.417 回答
8

使用 freemarker，您可以使用string内置的：

<#list items as item>
   <tr style='background-color: ${((item_index % 2)==0)?string("green", "blue")}'><td>${item}</td></tr>
</#list>
于 2010-02-16T20:24:11.470 回答
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>

从震耳欲聋的沉默中，我推断出没有比这更好的方法了。

于 2009-02-04T11:30:18.860 回答
1

然后解决方案归结为：

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

于 2010-02-16T19:54:31.270 回答
1

在 FreeMarker 2.3.23 中：

<#list items as item>
    <tr style='background-color: ${item?item_cycle('green', 'red')}'><td>${item}</td></tr>
</#list>
于 2015-07-05T17:29:42.040 回答
0

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

于 2009-02-04T11:43:44.060 回答
0

您可以使用以下构造在 FreeMarker 中模拟三元运算符：${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>
于 2013-09-24T08:43:37.803 回答