KeyTable: Instant keyboard navigation in a table
Allan Jardine is up to his old tricks again (his tricks are: creating helpful small tools!). This time he has created KeyTable, a library that adds the ability to use the keyboard to navigate around an HTML table.
Events can be bound (and unbound) to cells as required by the developer, allowing increased accessibility to Javascript enhanced tables. This library is somewhat similar to QFocuser that was posted on Ajaxian back at the start of the month, but specialises in table navigation. KeyTable also integrates nicely with DataTables, such that paging and sorting is taken into account.
To get started you just need to var keys = new KeyTable(); and then you can add init params for fine grained work, and you can also add events:
JAVASCRIPT:
-
/* Example event listener */
-
keys.event.focus( 1, 3, function() {
-
/* processing on cell 1,3 … */
-
} );
-
/* this is exactly the same as */
-
keys.event.focus( $(‘#example tbody tr:eq(3) td:eq(1)’)[0], function() {
-
/* processing on cell 1,3 … */
-
} );
The front page has an example that uses jEditable allowing you to mouse around, hit enter, change a field, and go back:
