Tiny jQuery Plugin For Creating An Editable Table - editTable

File Size: 7.7 KB
Views Total: 12747
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny jQuery Plugin For Creating An Editable Table - editTable

A basic jQuery implementation of editable table that help you edit your individual table cells in place. 

How to use it:

1. Include jQuery library and jQuery editTable plugin's Javascript and CSS in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.edittable.min.js"></script>
<link rel="stylesheet" href="css/jquery.edittable.min.css">

2. Create an empty element that will be served as a data table container.

<div id="edittable"></div>

3. Call the plugin on the container elements and create the initial data for the table using Javascript array object. 

<script>
$("#edittable").editTable({
data: [
['Ali', 'Programmer', 'Python, C++'],
['Yazen', 'Programmer', 'Python, C++']
],
headerCols: [
'Employee',
'Title',
'Stack'
],
});
</script>

4. Default options.

<script>
$("#edittable").editTable({
name: '',
data: [['']],
jsonData: false,
headerCols: false,
maxRows: 999
});
</script>

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