Press "Enter" to skip to content

A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static HTML table into an editable table. Quickly populate a small table with JSON data, allow the user to modify it with validation, and then restore the JSON data.

editable html table using javascript, how to edit data in html table using jquery, editable table in html, jquery edit table row example, jquery inline edit table row

How to make use of it:

1. To get began, embrace the jquery-editable-table.min.js after loading the newest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-editable-table.min.js"></script>

2. Create an empty HTML table with predefined header cells.

<table id="example-table" class="my-table">
   <thead>
     <tr>
       <th>Id</th>
       <th>Custom Color Example</th>
       <th>Secret Value</th>
       <th>Number Example</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>

3. Initialize the plugin and config the editable cells for every column.

let myEditableTable = $('#example-table').editableTable({
    columns: [
      // column 1
      {
        index: 0,
        name: 'id',
        removeRowIfCleared: true,
        isValid: (newVal, data) => {
          // do something
        }
      },
      // column 2
      {
        index: 1,
        name: 'color',
        classes: ['text-center'], // additional CSS classes
        isValid: (newVal, data) => {
          // do something
        }
        afterAdd: function (addedColor, cell) {
          // do something
        }
        afterChange: function (newColor, cell) {
          // do something
        }
        convertOut: (outgoingVal) => {
          // do something
        }
      },
      // hidden column
      {
        index: 2,
        name: 'secretValue',
        isHidden: true
      },
      // column 4
      {
        index: 3,
        name: 'number',
        classes: ['text-end'],
        isValid: (val) => {
          val = parseInt(val);
          return !isNaN(val) && Number.isInteger(val);
        },
        convertOut: (outgoingVal) => {
          // Convert to a number
          return Number(outgoingVal);
        },
      }
    ]
});

4. Populate the HTML table with the information you provide.

myEditableTable.setData([
  {
    id: 0,
    color: '#eb348c',
    number: 321,
    secretValue: 'secret0'
  },
    {
    id: 1,
    color: '#34bdeb',
    number: 123,
    secretValue: 'secret1'
  },
      {
    id: 2,
    color: '#000',
    number: 666,
    secretValue: 'secret2'
  }
]);

5. Add a brand new row to the editable table.

myEditableTable.addRow({
  id: 5, 
  color: '#FFFFFF', 
  number: 0, 
  secretValue: 'secretNewwwww',
});

6. Get the current table information.

myEditableTable.getData();

7. Clear all table information.

myEditableTable.clear();

Tiny Editable Table With Data Conversion & Validation, jquery editable table Plugin/Github, editable table, html dynamic editable table, inline edit table javascript


See Demo And Download

Official Website(torrobinson): Click Here

This superior jQuery/javascript plugin is developed by torrobinson. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.