Creating an editable table from an array, textarea, table using jQuery Table Edit Plugin
Today I am going to share an useful jquery plugin to creating an editable table from an array, textarea, html table, It is helpful to add client side quick editable feature on your website with lot’s of extra feature like add and delete rows, cells. The plugin contains enough options and callback functions for quick customization for your task.
Creating an editable table
follow below steps to quickly add editable table feature on your website.
Libraries
Include latest jQuery core library and other plugin’s resources on the web page.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/tableEdit.css"> <script src="js/core.js"></script> <script src="js/create_table.js"></script> <script src="js/controllers_table.js"></script> <script src="js/events_table.js"></script> <script src="js/callbacks_bootstrap_modal.js"></script> <script src="js/callbacks_define_types.js"></script>
Create editable table form simple html table
HTML
<table id="from-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
<th>head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td colspan="2" class="warning colspan">value</td>
<td>value</td>
<td>value</td>
</tr>
<tr>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
JS
Call plugin’s function to make above table editable
jQuery(document).ready(function($){
$('#from-table').tableEdid();
});
Create editable table form HTML Textarea
HTML
<textarea id="from-textarea" class="hidden">
[
[ {"value":"head 1"}, {"value":"head 2"}, {"value":"head 3"}, {"value":"head 4"}, {"value":"head 5","settings":{"class":"danger"}} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ]
]
</textarea>
JS
jQuery(document).ready(function($){
$('#from-textarea').tableEdid();
});
Create editable table form HTML Array or Json
JS
var Table = [
[ {"value":"head 1"}, {"value":"head 2"}, {"value":"head 3"}, {"value":"head 4"}, {"value":"head 5"} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
[ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ]
];
Table.tableEdid();
See live demo and download source code.
DEMO | DOWNLOAD
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.
