Fork me on GitHub

$.Table Edits

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

Name Birthday Age Sex Edit
Dave Gamache May 19, 2015 26 Male
Dwayne Johnson May 19, 2015 42 Male

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

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

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

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);
    }
});