jQuery Plugin To Navigate Cells In The Table Using Keyboard - tablenav

tablenav is a lite yet useful jQuery plugin that allows the user to use arrow keys to navigate the cells in the Html table with input fields in an Excel-like way. As you see in those spreadsheets apps.

How to use it:

1. Include the latest jQuery javascript library and jQuery tableNav's javascript at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.tablenav.min.js"></script> 

2. Create an Html table with input fields

<table id="demo">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="1" disabled /></td>
<td><input type="text" value="55" /></td>
<td><input type="text" value="446" /></td>
</tr>
<tr>
<td><input type="text" value="2" disabled /></td>
<td><input type="text" value="55" /></td>
<td><input type="text" value="55" /></td>
</tr>
</tbody>
</table>

3. Call the plugin on document ready and you're done.

$(document).on('ready', function() {
$('#demo').tableNav();
return $('#demo input').eq(1).click();
});

4. Style your table elements and input fields via CSS.

table {
...
}
table thead td {
...
}
table tbody td {
...
}
table tbody td:first-child {
...
}
table input {
...
}

About author:

Author: Loran Kloeze

Project Homepage: https://github.com/invetek/jquery-tablenav

---

This awesome jQuery plugin is developed by invetek. For more Advanced Usages, please check the demo page or visit the official website.