DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

KeyTable allows you to use keyboard navigation on an HTML table. The focused cell is shown through the CSS class ('focus') which in the case below is simply a blue border. Events such as 'focus', 'blur', 'esc' (the escape key) and 'return' (the return key) can be assigned event handling functions thought the API presented.

The example shown below has a few cells (selected at random, but near the top) with blur and focus events assigned to them. You can also see the navigation around the table using arrow keys.

Live example

Initialisation code

function fnMessage ( sMesg )
{
	var n = document.getElementById('info');
	n.innerHTML += sMesg+"<br>";
	n.scrollTop = n.scrollHeight;
}

$(document).ready( function () {
	var keys = new KeyTable();
	
	/* Focus handler for all cells in last column */
	keys.event.focus( 4, null, function( nNode, x, y ) {
		fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
	} );
	
	/* Focus handler for all cells in 8th row */
	keys.event.focus( null, 7, function( nNode, x, y ) {
		fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
	} );
	
	/* Focus using coords. */
	keys.event.focus( 1, 0, function( nNode ) {
		keys.event.remove.focus( nNode );
		fnMessage( "Cell 1,0 focus - this event has now been removed" );
	} );
	
	keys.event.focus( 1, 3, function() {
		fnMessage( "Cell 1,3 focus" );
	} );
	
	/* focus with a node */
	keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
		fnMessage( "Cell 0,2 focus" );
	} );
	
	/* Blur using a node */
	keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
		fnMessage( "Cell 1,2 blur" );
	} );
	
	/* Blur using coords */
	keys.event.blur( 2, 4, function() {
		fnMessage( "Cell 2,4 blur" );
	} );
	
	/* Action */
	keys.event.action( 2, 2, function( nNode ) {
		fnMessage( "Cell 2,2 action" );
		if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
			nNode.style.fontWeight = "bold";
		} else {
			nNode.style.fontWeight = "normal";
		}
	} );
	
	keys.event.action( 2, 5, function( nNode ) {
		fnMessage( "Cell 2,5 action" );
		if ( nNode.style.fontStyle == "" ) {
			nNode.style.fontStyle = "italic";
		} else {
			nNode.style.fontStyle = "";
		}
	} );
} );

Other examples

• Basic usage
• Editing a table
• Integration with an HTML form
• Integration with DataTables
• Using KeyTable with scrolling in DataTables