DOJO 1.0: Highlighting alternative table rows

DOJO has hit 1.0 and changed a lot of things. So the documentation is still all over the place with examples using old syntax.

I am migrating to DOJO from jQuery, so just wanted to get basic dojo.query functionality to work. Specifically, I wanted to highlight alternative table rows.

Not easy! At least for a newbie. I had to piece together 3 different documents and examples to figure out the easiest syntax.

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
 <script type="text/javascript">
    dojo.addOnLoad(function(){
        dojo.query("table tbody tr:nth-child(odd)").addClass("even");
     });
</script>

This highlights 1st, 3rd, 5th… rows in table body. It is also possible to say nth-child(3n+0) to select every third row. However nth-child(3n) does not work, at least in 1.0.

4 thoughts on “DOJO 1.0: Highlighting alternative table rows”

  1. Mostly for accessibility, but it would be nice to have a room for growth if widgets are required.

    Also, if I am going to learn one framework in depth, DOJO looks like one with more support by commercial companies.

  2. To make it select a particular table use:

    dojo.addOnLoad(function(){
    dojo.query(“#data_table tbody tr:nth-child(odd)”).addClass(“odd”);
    dojo.query(“#data_table tbody tr:nth-child(even)”).addClass(“even”);
    });

    Where “data_table” is the CSS id of your table element.

Comments are closed.