jQuery Plugin For Editable Table Rows - Table Edits

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.

Features:

• Double click on a table row to start editing.
• Edit / cancel / save buttons.
• Supports input fields and select dropdown.
• Keyboard support.
• Callback functions.

Basic usage:

1. Load jQuery library and the jQuery Table Edits plugin's JS & CSS files in your project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="build/table-edits.min.js"></script>

2. Load the Font Awesome for button icons (OPTIONAL).

<link href="font-awesome.min.css" rel="stylesheet">

3. Add the required data-field to table cells that will be editable.

<td data-field="name">Dave Gamache</td>
<td data-field="birthday">May 19, 2015</td>
<td data-field="age">26</td>
<td data-field="sex">Male</td>

4. Call the plugin on the tr tag of your html table.

$("table tr").editable(OPTIONS);

5. Default plugin options.

$("table tr").editable({

  // enable keyboard support
  keyboard: true,

  // double click to start editing
  dblclick: true,

  // enable edit buttons
  button: true,

  // CSS selector for edit buttons
  buttonSelector: ".edit",

  // uses select dropdown instead of input field
  dropdowns: {},

  // maintains column width when editing
  maintainWidth: true,

  // callbacks for edit, save and cancel actions
  edit: function(values) {},
  save: function(values) {},
  cancel: function(values) {}
  
});

6. Save the data to the server.

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

Change log:

2015-10-09

• Fixed a bug where you can't save a row when using a dropdown and pressing enter on Chrome

2015-05-27

• add support for select fields

---

This awesome jQuery plugin is developed by nathancahill. For more Advanced Usages, please check the demo page or visit the official website.