This time I will share jQuery Plugin and tutorial about Excel-like Interactive Table With Keyboard Navigation – Tablenav, hope it will help you in programming stack.
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:
01 |
<table class="table" id="demo"> |
11 |
<td><input type="text" /></td> |
12 |
<td><input type="text" /></td> |
13 |
<td><input type="text" /></td> |
16 |
<td><input type="text" /></td> |
17 |
<td><input type="text" /></td> |
18 |
<td><input type="text" /></td> |
2. Include jQuery JavaScript library and the JavaScript file jquery.tablenav.js at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.tablenav.js"></script> |
3. Call the function on the html table and activate the input fields.
4. Add a custom background color to the table celled when selected.
5. More config options with default values.
Changelog:
2019-11-16
2018-10-28
2018-02-06
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.
