Easy Dynamic HTML Table Manipulation Plugin - jQuery OliverEditTable

File Size: 6.15 KB
Views Total: 4150
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Dynamic HTML Table Manipulation Plugin - jQuery OliverEditTable

An easy HTML table manipulation plugin for dynamically generating an editable, cloneable HTML table from an array of objects containing tabular data.


  • Add/remove/clone table rows.
  • Editable table cells.
  • Format tabular data.
  • Ouput the current data.
  • Get the number of table rows.

How to use it:

1. Prepare your tabular data in a JS array as follows:

var data = '[
      "input":"Input Field",
      "text":"Any Text",
      "input":"Input Field",
      "text":"Any Text",
    // more data here

2. Create an empty HTML table on the page:

<table id="testTable">
      <th data-editable="true">Add/Remove</th>
      <th style="display:none;" data-type="input" data-field="id" data-hidden="true">Hidden Column</th>
      <th data-type="input" data-field="input">Editable</th>
      <th data-type="text" data-field="text" >Plain Text</th>
      <th data-field="testFormatter" data-formatter="formatter">Format Data</th>
      <th data-type="input" data-field="inputReadonly" data-readonly="true">Disabled</th>

3. Load the main JavaScript file oliverEditTable.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/oliverEditTable.js"></script>

3. Populate the tbody with the data you just defined.

window.tableExample = editTable.createExample("testTable");

// add row
function addRow(el,data,rowId){
  var example;
  if(el == "testTable"){
    example = window.tableExample;
  if(data!="" && data!=undefined && data!=null){
    var templ = '[]';

// remove row
function delRow(el,data,rowId){
  var example;
  if(el == "testTable"){
    example = window.tableExample;
  var length = example.getTableLength();
    alert("at least 1 row");
    return false;

4. Format the tabular data.

function formatter(value,el,rowData){
  var renderHtml = "<select id='"+el+"' value='"+value+"'>"
  renderHtml += "<option value='2'>2</option>"
  renderHtml += "<option value='3'>3</option>"
  renderHtml += "</select>";
  return renderHtml;

5. Get the tabular data.


6. Get the number of table rows.


7. Clear all tabular data.


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