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:

• Simple In-line Editing Plugin For jQuery - Quick Edit

Basic usage:

1. Add the jQuery tabledit plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.tabledit.js"></script>

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

$('#my-table').Tabledit({

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

});

3. All the plugin options.

$('#my-table').Tabledit({

// 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:

2015-04-21

• 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

2015-04-03

• 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

2015-03-10

• 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

2015-03-08

• 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.

2015-03-06

• Fixed bug when creates the form wrapped on table.

2015-02-09

• 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.