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

发布于 2024-11-14 15:25:02 字数 89 浏览 1 评论 0原文

我有 gsp 表,并且我使用每行的 gsp 的每个标签填充从控制器传递的集合中的字段值。现在我希望 billId 字段获得相同值的行应该以不同的颜色显示。怎么做呢?

I have gsp table, and I'm filling values in its fields from collection passed from controller using each tag of gsp for each row. Now I want rows which gets same value for billId field should get displayed in different color. How to do that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

那伤。 2024-11-21 15:25:02

尝试以下操作:

<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文件中,你必须定义类偶数和奇数,例如使用背景颜色。不知道你的输出结构是什么样的,所以创建了一个示例代码。

Try following:

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

for every odd and even billing id you define a different css style. in you main css file you have to define the class even and odd e.g. with a background color. don't know hwo you output structure looks like, so created a sample code.

一腔孤↑勇 2024-11-21 15:25:02

虽然以相同颜色显示具有相同 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 中,您需要创建名为 rows1rows2 的类来定义行样式

While it might seems like a good idea to show table rows with the same billId value in the same color, this may not be practical. For example, if you have 100 different billId field values, you'll need to find 100 different colors to use for your table rows and each of these colors will need to work well with the table's background/text color.

Even if you can somehow find enough colors, your table is likely to end up looking like an explosion in a paint factory.

A simpler/better solution might be to use a row's onclick event to highlight all rows in red (for example) that have the same billId value as the selected row. You'll need to use JavaScript for this.

Update

The comment below explains that you simply want alternating colors every 5 rows. Try this:

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

In CSS you'll need to create classes named rows1 and rows2 that define the row styles

呆° 2024-11-21 15:25:02

尝试

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

Try

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文