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

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.