<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" table-class="row-border hover order-column" order="4">

<css lib="datatables" />
<css><![CDATA[

td.highlight {
	background-color: whitesmoke !important;
}

]]></css>
<js lib="jquery" />
<js lib="datatables" />

<title>Highlighting rows and columns</title>
<js><![CDATA[

$(document).ready(function() {
	var table = $('#example').DataTable();
	
	$('#example tbody')
		.on( 'mouseenter', 'td', function () {
			var colIdx = table.cell(this).index().column;

			$( table.cells().nodes() ).removeClass( 'highlight' );
			$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
		} );
} );

]]></js>

<info><![CDATA[

 Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.

 This example shows DataTables making use of the `dt-api cell().index()` method to get the index of the column that is to be operated on, and then the `dt-api cells().nodes()` and `dt-api column().nodes()` methods to remove old classes and apply the new highlighted class, respectively.

]]></info>

</dt-example>
