Customizing Display Tag Rows with JQuery

Display Tag is quite flexible, yet it lacks some customization possibilities. I had the requirement of customizing the rows of a table generated by display tag.
I had to attribute a specific CSS class to each row of my table depending on the value of a specified column. I found one solution on the net with javascript. I'm not a big fan of javascript (the language, not its usage). I always find myself struggling with the syntax, the DOM tree and the cross-browser issues.

Enter JQuery!

JQuery has caught my eye recently. I was impressed by its simple structure and powerful selectors. For me, it made sense.
Let's take the following display tag table as an example:

<dt:table name="list" id="displaytag" >
    <dt:column property="date" title="Date" sortable="true"/>
    <dt:column property="type" title="Type" sortable="true"/>
    <dt:column property="value" title="value"/>
 </dt:table>

Here's how to attribute a CSS class depending on the value of the second column with JQuery:

$(function() {
$("#displaytag tr[td:nth-child(2):contains('value1')]")
  .attr("class", "style1");
});

In plain English this reads: select from the table with the id "displaytag" all rows whose second column contains "value1", and set their class attribute to "style1". JQuery selectors use a mix of CSS and XPath in addition to other elements. Their power enables this kind of one liners although they might seem confusing at first.
Here's another example hardly more complicated: how to modify the value of the third column depending on the value of the second:

$(function() {
$("#displaytag tr[td:nth-child(2):contains('x')]>td:nth-child(3)")
  .append("xxx");
});

That's it!