Row Highlighting

Another visual enhancement that we can apply to our news article table is row highlighting based on user interaction. Here we’ll respond to clicking on an author’s name by highlighting all rows that have the same name in their author cell. Just as we did with the row striping, we can modify the appearance of these highlighted rows by adding a class:

#content tr.highlight {
  background: #ff6;
}

It’s important that we give this new highlight class adequate specificity for the background color to override that of the even and odd classes.

Now we need to select the appropriate cell and attach the .click() method to it:

$(document).ready(function() {
  var column = 3;
  $('table.striped td:nth-child(' + column + ')' )
  .click(function() {
    // Do something on click.
  });
});

Notice that we use the :nth-child(n) pseudo-class as part of the selector expression, but rather than simply including the number of the child element, we pass in the column variable. We’ll need to refer...