jQuery Plugin For In-place Editing Of Table Cells - SimpleTableCellEditor

jQuery Plugin For In-place Editing Of Table Cells - SimpleTableCellEditor
File Size: 18.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple, dynamic in-place table editor with jQuery that allows for table cells to be editable by clicking on them.

How to use it:

1. Include the minified version of the SimpleTableCellEditor plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="SimpleTableCellEditor.js"></script>

2. Initialize the table editor on your HTML table.

<table id="myTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="editMe">Alfreds Futterkiste</td>
    <td class="editMe">Maria Anders</td>
    <td class="editMe">Germany</td>
  </tr>
</table>
const editor = new SimpleTableCellEditor("myTable");

3. Specify the table cells to be editable.

editor.SetEditableClass("editMe",{

  // method used to validate new value
  validation : null,

  // method used to format new value
  formatter : null,

  // key codes
  keys : {
    validation: [13],
    cancellation: [27]
  }
  
});

// or
editor.SetEditable("td",{

  // method used to validate new value
  validation : null,

  // method used to format new value
  formatter : null,

  // key codes
  keys : {
    validation: [13],
    cancellation: [27]
  }
  
});

4. Available event handlers which will be triggered when the table cells are mofified.

editor.on("cell:edited", function (element, oldValue, newValue) {              
  // after editer
}); 

editor.on("cell:EditEnter", function (element, oldValue) {              
  // on edit mode
}); 

editor.on("cell:EditExit", function (element, oldValue, newValue, isApplied) {              
  // exit edit mode
}); 

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