Element Selector Alt Row Colors

This sample shows how to set up various row coloring schemes with the Element Selector.

There is another sample that shows how to set up row colors with Spry Data.

Even Rows No Header

Spry.$$("table#noheader tr:nth-child(even)").addClassName("grayBG");
or
Spry.$$("table#noheader tr:nth-child(2n)").addClassName("grayBG");

1
2
3
4
5
6

Even Rows With Header

Spry.$$("table#noheader tr:nth-child(2n+1)").addClassName("grayBG");

Header
1
2
3
4
5
6

Odd Rows No Header

Spry.$$("table#noheader tr:nth-child(odd)").addClassName("grayBG");
or
Spry.$$("table#noheader tr:nth-child(2n)").addClassName("grayBG");

1
2
3
4
5
6

Odd Rows With Header

Spry.$$("table#withheaderodd tr:nth-child(2n)").addClassName("grayBG");

Header
1
2
3
4
5
6

Alternating Colors

Spry.$$("table#alternating tr:nth-child(2n)").addClassName("grayBG");
Spry.$$("table#alternating tr:nth-child(2n+1)").addClassName("highlited");

1
2
3
4
5
6

3 Alternating Colors

Spry.$$("table#alternating tr:nth-child(2n)").addClassName("grayBG");
Spry.$$("table#alternating tr:nth-child(2n+1)").addClassName("highlited");
Spry.$$("table#alternating3 tr:nth-child(3n+3)").addClassName("red");

1
2
3
4
5
6