How to give different colors to set of rows in gsp table depending on values in fields?

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 开发者_Python百科I want rows which gets same value for billId field should get displayed in different color. How to do that?

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.

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

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>