Excel Style Editable Table Plugin With jQuery - Excel Table
File Size: | 19.8 KB |
---|---|
Views Total: | 12907 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Excel Table is a jQuery plugin which converts a standard HTML table into an Excel-style spreadsheet with support for edit, paste, undo, drag-to-copy, etc.
See also:
- Spreadsheet-style Data Table Plugin For jQuery - Dynamic Table
- jQuery Plugin For Dynamic Spreadsheet-like Data Grid - jExcel
- Spreadsheet-like Tabular Data Manipulation Plugin - Tabular Input
How to use it:
1. Add jQuery library and the jQuery Excel Table's files to the web page.
<link rel="stylesheet" href="css/excel-table.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"> </script> <script src="js/excel-table.js"></script>
2. Add the input fields to your table cells as these:
<table class="excel-table"> <thead> </thead> <tbody> <tr> <td><input type='text' class='editable' value='1'></td> <td><input type='text' class='editable' value='2'></td> <td><input type='text' class='editable' value='3'></td> </tr> ... </tbody> </table>
3. Call the function on the html table and the plugin will do the rest:
$(".excel-table").exceltable();
4. Sometimes you might need to override the default CSS selector of your html table.
$(".excel-table").exceltable({ defaultClass: "excel-table" });
This awesome jQuery plugin is developed by shail9689. For more Advanced Usages, please check the demo page or visit the official website.