Render table with Meteor Handlebars template so that rows have different colors

Question

How can I render a table with a handlebars-template in such a way, that each odd row has a different color than each even row?

Is there a way to get the array index within the {{#each}} statement or should I set an index property in the templates helper method?

Answer 1

The easiest way to achieve this is via nth-child selectors:

.my-table tr:nth-child(2n+1) {
  background: orange;
}

.my-table tr:nth-child(2n+2) {
  background: orangered;
}

It's understood by all browsers except IE <= 8, see here .