1.7

Table Of Contents
:nth-child(3n+1) matches child elements 1, 4, 7, 10 etc., so every third element, starting at 1.
Via script (based on a data field value)
To style a table, row or cell based on a data field value, you have to write a script (see "Writing
your own scripts" on page552).
First add an ID or class to the table, row or cell that needs to be styled: select the element (see
"Selecting a table, row or cell" on page506) and add an ID on the Attributes pane. Then
create a script, using that ID or class as the script's selector. The script can be very simple:
if (record.fields.COUNTRY == 'CANADA') {
results.css('color','green');
}
The Designer Scripts API provides several functions to style elements, for example css(),
hasClass() and addClass() (see "Designer Scripts API" on page786).
Styling based on a value in a detail table
Styling rows or cells in a detail table based on a value in the detail table goes a bit different.
First set an ID on the detail table as a whole and create a script that uses thatID tbody as the
script's selector. If for example the ID is table_1, the selector will be: #table_1 tbody. Then
write a script like the following:
for(var i = 0; i < record.tables.detail.length; i++){
if(record.tables.detail[i].fields['Shipped'] == 1)
query("tr:nth-child(" + (i+1) + ")", results).css
('color','green');
}
This script loops over a detail table, evaluating the field Shipped. If the value of that field is 1, it
looks up the corresponding row in the results (the object that contains the selected detail
table) and colors the text of that row green. (See also: "query()" on page806 and "Examples"
on page827.)
Page 509