🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Table Edits is a very small jQuery plugin that adds inline edit capability to html table by converting table cells into input fields or select dropdowns when you start editing.

editable-table

Documentation

$.Table Edits

Build Status File Size

Table Edits is a lightweight jQuery plugin for making table rows editable. Built as minimally as possible so it's easy to extend. Demo

Table Edits only does a couple things:

  • Replaces cell values with input fields on edit
  • Handles row editing state
  • Fires callbacks for edit, save and cancel

And optionally, a couple more:

  • Binds a button or double click to start editing
  • Binds enter and escape keys to save and cancel
  • Maintains column widths when switching to edit
  • Create select fields instead of input fields

Options

$("table tr").editable({     keyboard: true,     dblclick: true,     button: true,     buttonSelector: ".edit",     dropdowns: {},     maintainWidth: true,     edit: function(values) {},     save: function(values) {},     cancel: function(values) {} }); 

Markup

The only additional markup Table Edits requires is a data-field attribute on each editable cell with it's column name:

<table>     <tr>         <td data-field="name">Dave Gamache</td>         <td data-field="age">26</td>         <td data-field="sex">Male</td>         <td>             <a class="edit>Edit</a>         </td>     </tr> <table> 

The last cell will not become editable because it does not have the data-field attribute.

Saving Table Data

Table Edits makes it easy to save edits. Callbacks are passed a values object with column names and values of the edited row.

Posting the new data to an API endpoint is simple.

$("table tr").editable({     save: function(values) {       var id = $(this).data('id');       $.post('/api/object/' + id, values);     } }); 

You May Also Like