jQuery 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 to the same nth-child again, so using a variable allows us to change it in only one place if we later decide to highlight based on a different column.

NOTE: Unlike JavaScript indices, the CSS-based :nth-child(n) pseudo-class begins numbering at 1, not 0.

When the user clicks a cell in the third column, we want the cell's text to be compared to that of the same column's cell in every other row. If it matches, the highlight class will be toggled. In other words, the class will be added if it isn't already there and removed if it is. This way, we can click on an author cell to remove the row highlighting if that cell or one with the same author has already been clicked:

$(document).ready(function() { 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.click(function() { 
 
var thisClicked = $(this).text(); 
 
$('table.striped td:nth-child(' + column + ')') 
 
.each(function(index) { 
 
if (thisClicked == $(this).text()) { 
 
$(this).parent().toggleClass('highlight'); 
 
}; 
 
}); 
 
}); 
 
})

The code is working well at this point, except when a user clicks on two authors' names in succession. Rather than switching the highlighted rows from one author to the next as we might expect, it adds the second clicked author's rows to the group that has class="highlight". To avoid this behavior, we can add an else statement to the code, removing the highlight class for any row that does not have the same author name as the one clicked:

$(document).ready(function() { 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.click(function() { 
 
var thisClicked = $(this).text(); 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.each(function(index) { 
 
if (thisClicked == $(this).text()) { 
 
$(this).parent().toggleClass('highlight'); 
 
} else { 
 
$(this).parent().removeClass('highlight'); 
 
}; 
 
}); 
 
}); 
 
})

Now when we click on Rey Bango, for example, we can see all of his articles much more easily:

If we then click on John Resig's name in any one of the cells, the highlighting will be removed from Rey Bango's rows and added to John's.