This time I will share jQuery Plugin and tutorial about jQuery Inline Editor For Bootstrap 3/4 Tables – Table Editor, hope it will help you in programming stack.
Table Editor is a lightweight jQuery/Bootstrap plugin which provides an inline editing functionality for table cells on single click. Supports both Bootstrap 3 and Bootstrap 4.
More features:
- Converts table data to JSON.
- Converts JSON to table data.
- Add/remove columns and rows via Right-click context menu.
How to use it:
1. Add the jQuery Table Editor plugin’s JS and CSS files to your Bootstrap project.
02 |
<script src="jquery.min.js"></script> |
05 |
<link rel="stylesheet" href="bootstrap.min.css"> |
06 |
<script src="bootstrap.min.js"></script> |
09 |
<link rel="stylesheet" href="bootstrap.table-editor.css"> |
10 |
<script src="bootstrap.table-editor.js"></script> |
2. Call the plugin on the target Bootstrap table and done.
1 |
$('table').tableEditor(); |
3. Execute a callback function on each table cell change.
1 |
$('table').tableEditor({ |
2 |
onChange: function(value, cell, table, tableEditor) { |
3 |
console.log(value, cell, table, tableEditor) |
4. Generate a Bootstrap table from JSON:
1 |
$('table').tableEditor('json', [ |
5. Convert table data into JSON:
1 |
$('table').tableEditor('json') |
Change log:
2017-07-12
- Added Dutch language translation
This awesome jQuery plugin is developed by datamosh. For more Advanced Usages, please check the demo page or visit the official website.
