Improving table usabiltity with jQuery

I’ve often found reading information quickly and correctly from a large HTML table difficult. I would like to share a small piece of jQuery code I wrote to help improve the readability of large tables. It provides two functions. Highlight the row of the table on which the mouse is hovered over and highlight the row if clicked on it. Row highlighting allows you to easily track the correct line across the screen while click highlighting enables you remember a particular spot of interest.

All this requires is the latest version of jQuery (version 1.2.6 included in the demo download) and to past in the code provided. You also need a bit of knowledge of HTML and CSS to implement in your own web site.

Download (16kb Zip)

See the Demo

Code

$(document).ready(function(){
	// improve table usability
	$("table").find("tr").hover(function(){
		$(this).addClass("rowhighlight");
	},function(){
		$(this).removeClass("rowhighlight");
	});

	// Add class on single click
	$("table").find("tr").click( function() {

		if($(this).attr("class") == "rowhighlight_clicked rowhighlight"){
			$(this).removeClass("rowhighlight_clicked");
		}else{
			$(this).addClass("rowhighlight_clicked");
		}
	});
})