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 Style Editable Table Plugin With jQuery - Excel Table

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:

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.