Preamble

The highlighting of rows and columns have be quite useful for attracting attention to where the user's cursor is in the data array. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript. This example shows that in action on a DataTables enhanced table - this type of effect would be particularly effective on tables with dense information.

Live example

Initialisation code

$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"bSortClasses": false
	} );
	
	$('td', oTable.fnGetNodes()).hover( function() {
		var iCol = $('td', this.parentNode).index(this) % 5;
		var nTrs = oTable.fnGetNodes();
		$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
	}, function() {
		$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
	} );
} );

Other examples