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

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