Color a table every second row

[klaus.soerensen]

Hi

Have at table, where every second row has to be another color.
Every row consists of 1 or more lines.
So a normal color theme can’t be used on a table.
So I use CSS styling and it almost works.
I have some parts listed in the table with info, and a detailed table containing add. info.
How do I address the current part number, when I’m in the detailed table.
Properly something simple, I haven’t figured out.

This works on the part numbers:
var RowColor = this.record.fields[‘PartsIndex’];
if (RowColor % 2 == 0) {
this.attr(‘class’, ‘trhighlight’)
}

This does not work on the detailed table under part numbers.
var parentRow = this.parent();
var RowColor = parentRow.find[‘PartsIndex’];
if (RowColor % 2 == 0) {
this.attr(‘class’, ‘trhighlight’)
}

[Erik]

Bit of an academic approach. Every row and the accompanying virtual nested rows belong to the same detail record. This information is stored in the data-group-reference attribute on the elements (you can inspect that via an external browser).

You could use this information to determine the index and apply your modulo logic. Admittedly not trivial (and perhaps there other ways) but this is what I did:

1. Created a script to target all rows in the tbody of your dynamic table. In my case:
   .products tbody tr

2. Subsequently I read the value of the data-group-reference attribute and extracted the index, using:
   let groupIdxStr = this.attr("data-group-reference") || 'detail.0'
let groupIdx = groupIdxStr.split(".").pop()

3. Next I used modulo to determine if the value is even (you already figured that out). Subsequently I add a class (similar to what you do).
   if( ! ( groupIdx % 2 )) this.addClass('trhighlight')

Below a screendump of the end result.

I expect our developers to advise me against using data attributes since we cannot ensure they will remain unchanged in future versions. So please proceed with caution.

Hope this helps,

Erik

[jchamel]

var groupReferenceNumber = this.attr('data-group-reference').match(/\d+/)[0]
if(groupReferenceNumber % 2 === 0) this.addClass('grey')
else this.addClass('blue');

[klaus.soerensen]

Thanks guys. First solution works.
Second one gives me an “red” error ind the script.

Klaus

[klaus.soerensen]

I was a little to fast on this one.
I just colors every row in the same color the detailed table.

[jchamel]

Did you set the Options Scope to Each matched element? That could be the cause of the red X error.

[jchamel]

If you want every row of a specific group to be all of the same color, you need to set your CSS like so:

.colorDesired > td {
    background-color: <color>
}

[klaus.soerensen]

Each matched element was on.
Used another approach.
Put in two indexes in the datamapper, one for the record and one index in the detailed record.
The index in the detailed record is always the same number as the record index.
Then i could control it with this.record.fields[‘Index’];