Excel-like Interactive Table With Keyboard Navigation - Tablenav
File Size: | 13.5 KB |
---|---|
Views Total: | 9247 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tablenav is a very small jQuery plugin for creating spreadsheet-like data table with input fields and keyboard navigation support just like the Microsoft Excel.
How to use it:
1. Create a regular html table with or without input fields:
<table class="table" id="demo"> <thead> <tr> <th> </th> <th> </th> <th> </th> </tr> </thead> <tbody> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </tbody> </table>
2. Include jQuery JavaScript library and the JavaScript file jquery.tablenav.js
at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.tablenav.js"></script>
3. Call the function on the html table and activate the input fields.
$("#demo").tablenav({ input:true })
4. Add a custom background color to the table celled when selected.
$("#demo").tablenav({ input:true, background:'#89AAE6' })
5. More config options with default values.
$("#demo").tablenav({ // z-index property zindex:12, // default CSS class class:'grid-table-clicked', })
Changelog:
2019-11-16
- Update
2018-10-28
- Imporved performance
2018-02-06
- JS Update
About Author:
Author: Naveen DA
Website: https://naveenda.github.io/tablenav/
This awesome jQuery plugin is developed by NaveenDA. For more Advanced Usages, please check the demo page or visit the official website.