Inline Table Editing With jQuery And PHP - Tabledit

File Size: 43.4 KB
Views Total: 69071
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Inline Table Editing With jQuery And PHP - Tabledit

The Tabledit jQuery plugin provides the inline editing/removing functionality on table cells and sends resulting changes via AJAX so you can handle them accordingly using PHP for backend.

Compatible with Bootstrap 3 and Bootstrap 4 framework. Licenced under the GPL-3.0.

Basic usage:

1. Include the JavaScript file jquery.tabledit.js after jQuery library and we're ready to go.

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

2. Assume that you have an html table as this:

<table class="table">
      <td>[email protected]</td>
      <td>[email protected]</td>
      <td>[email protected]</td>

3. Call the function on the html table and specify the URL the resulting changes should be sent.

  url: 'example.php',
  columns: {
    identifier: [0, 'id'],                    
    editable: [[1, 'col1'], [2, 'col1'], [3, 'col3']]

4. The example PHP:


// Basic example of PHP script to handle with jQuery-Tabledit plug-in.
// Note that is just an example. Should take precautions such as filtering the input data.

header('Content-Type: application/json');

  $input = filter_input_array(INPUT_POST);
} else {
  $input = filter_input_array(INPUT_GET);


// Connect to DB

  /*  Your code for new connection to DB*/

// Php question
if ($input['action'] === 'edit') {

  // PHP code for edit action

} else if ($input['action'] === 'delete') {

  // PHP code for edit delete

} else if ($input['action'] === 'restore') {

  // PHP code for edit restore


// Close connection to DB

/*  Your code for close connection to DB*/

echo json_encode($input);


5. The default plugin options and callback functions:


  // Link to server script
  url: window.location.href,

  // Server request method for action 'edit' and 'delete'
  editmethod: 'post',
  deletemethod: 'post',

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

  // Class for toolbar header column
  toolbarHeaderClass: '',

  // Class for buttons 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
  successClass: 'success',

  // Class for row when is deleted
  mutedClass: 'text-muted',

  // Class for prohibiting cell editing
  noEditClass: 'noedit',

  // Trigger to change for edit mode
  eventType: 'click',

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

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

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

  // Localization -(en, default) - LowerCase or UpperCase
  lang: 'en',

  // Debug mode
  debug: false,

  // Escape Html - convert hmtl character
  escapehtml: true,

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

  // Customize buttons created in the table
  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: ''
    restore: {
      class: 'btn btn-sm btn-warning',
      html: 'Restore',
      action: 'restore'
    confirm: {
      class: 'btn btn-sm btn-danger',
      html: 'Confirm'

   * REQUIRED - Set up in user options
   * Identifier column and editable columns
   * More info in Documentation (
   * columns: '',
  // Executed after draw the structure
  onDraw: function () {

  // Executed when the ajax request is completed
  onSuccess: function () {

  // Executed when occurred an error on ajax request
  onFail: function () {

  // Executed whenever there is an ajax request
  onAlways: function () {

  // Executed before the ajax request
  onAjax: function () {




  • Added Ajax Error function


  • Editing onAjax ()


  • Compatible with Bootstrap 4


  • v1.2.7


  • Set 'setTimeout'

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