css - 如何使用 TAL 创建斑马条纹 CSS？

Question

如何使用 Chameleon 或 Zope 页面模板轻松创建 CSS 斑马条纹？我想为表中的每一行添加odd和even类，但是使用带有repeat/name/oddorrepeat/name/even的条件即使使用条件表达式也看起来相当冗长：

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

如果您要计算多个类，这将变得特别乏味。

Answer 1

该repeat变量的 Zope Page Templates 实现有一个记录不足的额外参数parity，比给你字符串'odd'或'even'，在迭代之间交替：

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class repeat/row/parity">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

这也更容易插入到字符串表达式中：

tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"

这也适用于变色龙。