jQuery Plugin To Navigate Cells In The Table Using Keyboard - tablenav
File Size: | 114 KB |
---|---|
Views Total: | 7887 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.