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.

Features:

• 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 = '[
    {
      "id":"1",
      "input":"Input Field",
      "text":"Any Text",
      "testFormatter":"12345",
      "inputReadonly":"1"
    },
    {
      "id":"2",
      "input":"Input Field",
      "text":"Any Text",
      "testFormatter":"67890",
      "inputReadonly":"2"
    },
    // more data here
]';

2. Create an empty HTML table on the page:

<table id="testTable">
  <thead>
    <tr>
      <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>
    </tr>
  </thead>
  <tbody></tbody>
</table>

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");
addRow("testTable",data);

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

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

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.

tableExample.getTableData();

6. Get the number of table rows.

tableExample.getTableLength();

7. Clear all tabular data.

tableExample.cleanDate();

---

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