Arrow Table

Navigate HTML tables with arrow keys.

Usage

$('#my-table').arrowTable();

Examples

Enabling only certain keys

$('#my-table').arrowTable({
	enabledKeys: ['up', 'down']
});

Using beforeMove

You can use this callback to decide whether to allow the move or not. If you return false the plugin will stop the move.

$('#my-table').arrowTable({
	focusTarget: 'input, textarea',
	beforeMove: function(input, targetFinder, direction) {
		// Determine the target
		var target = targetFinder();
		if (direction === 'up' && $(target).is('textarea'))
		{
			// Don't allow move
			return false;
		}

		// Return nothing to allow the move
	}
});

It's even possible to modify the table in the beforeMove callback adding a row and the plugin will find the newly added row.

$('#my-table').arrowTable({
	beforeMove: function(input, targetFinder, direction) {
		if (direction === 'down')
		{
			$(input).closest('table').find('tbody').append('<tr><td><input type="text"/></td></tr>');
		}
	}
});

See all possible options below.

Options

Option	Default	Description
enabledKeys	['left', 'right', 'up', 'down']	Enabled keys
listenTarget	'input'	Target to listen for key move events
focusTarget	'input'	Target to focus after move
continuousDelay	50	Delay in ms before moving onto next cell when holding arrow keys down
beforeMove	$.noop	Before moving callback. Return false to stop move
afterMove	$.noop	After moving complete callback.

API

destroy

$('#my-table').arrowTable('destroy');

Destroy the plugin instance