Creating A Live Editable Table with jQuery - Tabledit

File Size: 10.7 KB
Views Total: 162457
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Creating A Live Editable Table with jQuery - Tabledit

Tabledit is a small jQuery plugin that provides AJAX-enabled in-place editing for your table cells. The plugin has the ability to transform tables cells into input fields or select dropdowns with custom trigger events, to give the visitors a quick way to change cell values ​​directly.

See also:

Basic usage:

1. Add the jQuery tabledit plugin after jQuery library.

<script src="//"></script>
<script src="jquery.tabledit.js"></script>

2. Call the plugin on your existing table and specify the editable columns whatever you like.


columns: {
  identifier: [0, 'id'],                    
  editable: [[1, 'First Name'], [2, 'Last Name']]


3. All the plugin options.


// link to server script
// e.g. 'ajax.php'
url: window.location.href,

// class for form inputs
inputClass: 'form-control input-sm',

// // class for toolbar
toolbarClass: 'btn-toolbar',

// class for buttons group
groupClass: 'btn-group btn-group-sm',

// class for row when ajax request fails
dangerClass: 'danger',

// class for row when save changes
warningClass: 'warning',

// class for row when is removed
mutedClass: 'text-muted',

// trigger to change for edit mode.
// e.g. 'dblclick'
eventType: 'click',

// change the name of attribute in td element for the row identifier
rowIdentifier: 'id',

// activate focus on first input of a row when click in save button
autoFocus: true,

// hide the column that has the identifier
hideIdentifier: false,

// activate edit button instead of spreadsheet style
editButton: true,

// activate delete button
deleteButton: true,

// activate save button when click on edit button
saveButton: true,

// activate restore button to undo delete action
restoreButton: true,

// custom action buttons
buttons: {
  edit: {
    class: 'btn btn-sm btn-default',
    html: '<span class="glyphicon glyphicon-pencil"></span>',
    action: 'edit'
  delete: {
    class: 'btn btn-sm btn-default',
    html: '<span class="glyphicon glyphicon-trash"></span>',
    action: 'delete'
  save: {
    class: 'btn btn-sm btn-success',
    html: 'Save'
  restore: {
    class: 'btn btn-sm btn-warning',
    html: 'Restore',
    action: 'restore'
  confirm: {
    class: 'btn btn-sm btn-danger',
    html: 'Confirm'

// executed after draw the structure
onDraw: function() { return; },

// executed when the ajax request is completed
// onSuccess(data, textStatus, jqXHR)
onSuccess: function() { return; },

// executed when occurred an error on ajax request
// onFail(jqXHR, textStatus, errorThrown)
onFail: function() { return; },

// executed whenever there is an ajax request
onAlways: function() { return; },

// executed before the ajax request
// onAjax(action, serialize)
onAjax: function() { return; }


Change logs:


  • Added 'bower.json' to use this package manager
  • Added 'tbody' in the selector during the construction of the structure, to avoid problems with the 'tfoot'
  • Now when you tab in a row, the form is saved. Only if there is no save button


  • Updated 'example.php' file
  • Updated project page with examples and documentation
  • Now if 'onAjax()' hook returns false, does not send the ajax request
  • Added 'rowIdentifier' option to change the name of attribute in td element for the row identifier
  • Fixed bug that allows you to change to edit mode with mouse click when the line was deleted
  • Quick fix for issue that sometimes could not remove the warning class on the edited rows


  • Improved the select element
  • Does not add hidden save button if the 'editButton' option is false
  • Does not add hidden restore button if the 'deleteButton' option is false
  • Added a new option 'autoFocus' to enable or not the focus in the first input when click in save button
  • Added a new hook 'onAjax(action, serialize)' that runs before the ajax request


  • Added 'saveButton' and 'restoreButton' options.
  • Added 'toolbarClass' and 'groupClass' options.
  • Changed 'removeButton' option to 'deleteButton'.
  • Changed 'remove' action to 'delete'.
  • Removed 'textSelection' option, using CSS to prevent the text is selected with double click.
  • Removed 'confirmText' option, because a button was created to confirm the removal.
  • Removed form wrapped on table, because now it serialize inputs instead of the form.
  • In 'buttons' option now have a new child 'action' to change name of action input ('edit', 'delete' and 'restore').
  • Redesign of toolbox and changed name to toolbar.
  • Minor code improvement.
  • Fixed some bugs.


  • Fixed bug when creates the form wrapped on table.


  • Added toolbox column with edit and remove buttons.
  • Added effect on table row when ajax request fails.
  • Added effect on table row when changes are saved with success.
  • Added 'onAlways()' hook, that is executed whenever there is an ajax request.
  • Change 'onComplete(response)' hook to 'onSuccess(data, textStatus, jqXHR)'.
  • Change 'onError()' hook to 'onFail(jqXHR, textStatus, errorThrown)'.
  • Fixed some minor bugs.
  • Minor code improvement.

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