Question

我有gsp表，我在每个行中使用gsp的每个标记从控制器传递的集合中填充其字段中的值。现在我想要为billId字段获取相同值的行应该以不同的颜色显示。怎么做？

Answer 1

虽然以相同颜色显示具有相同billId值的表行似乎是个好主意，但这可能不实用。例如，如果您有100个不同的billId字段值，则需要找到100种不同的颜色用于表格行，并且每种颜色都需要与表格的背景/文本颜色配合使用。

即使你能以某种方式找到足够的颜色，你的桌子很可能看起来像是在油漆工厂爆炸。

更简单/更好的解决方案可能是使用行的onclick事件来突出显示红色（例如）中与所选行具有相同billId值的所有行。你需要使用JavaScript。

更新

下面的评论说明您只需要每5行交替颜色。试试这个：

<table>

<g:each in="${billings}" status="i" var="billing">

  <tr class="${i % 10 < 5 ? 'rows1' : 'rows2'}">
    <td>${billing.id}</td>

    <!-- Add other <tds> here -->
  </tr>
</g:each>

</table>

在CSS中，您需要创建名为rows1和rows2的类来定义行样式

Answer 2

请尝试以下操作：

<g:each in="${billings}" status="i" var="billing">
<set var="cssClass" value"${(billing.id % 2) == 0 ? 'odd' : 'even'}"/>
<g:each in="${billing.rows}" status="i" var="row">
<span class="${cssClass}">${row.id}</span>
</g:each>
</g:each>

为每个奇数和偶数结算ID定义不同的css样式。在你的主css文件中，你必须定义类甚至奇数，例如有背景颜色。不知道你输出结构的样子，所以创建了一个示例代码。

Answer 3

尝试

<g:each in="${billings}" status="i" var="billing">
  <set var="cssClass" value"${i < (billings.size()/2) ? 'class1' : 'class2'}"/>
  <g:each in="${billing.rows}" status="i" var="row">
    <span class="${cssClass}">${row.id}</span>
  </g:each>
</g:each>

如何根据字段中的值为gsp表中的行集提供不同的颜色？

3 个答案:

更新