1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="jquery.edittable.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.edittable.min.js"></script>
2. HTML
Now you can trigger editTable on any textarea or block element (ex. div, article, section …). In case you trigger it on a textarea, its content will be used as JSON source for the table. If the textarea is inside a form, on submit, its content will be updated with the new JSON data. Otherwise, if you trigger it on a block element the table will be appended to the element itself (ajax).
<form method="post" action="output.php">
<textarea id="source" style="display:none" name="myField" ><?php
echo json_encode(array(
array('Period','Full Board', 'Half Board', 'Bed & Breakfast'),
array('01/01 - 30/01','50.00 €', '40.00 €', '30.00 €'),
array('01/02 - 28/02','55.00 €', '45.00 €', '35.00 €'),
array('01/03 - 31/03','60.00 €', '50.00 €', '40.00 €'),
array('01/04 - 30/04','55.00 €', '45.00 €', '35.00 €'),
array('01/05 - 31/05','50.00 €', '40.00 €', '30.00 €')
));
?></textarea>
<button type="submit">Send data</button>
</form>
3. JAVASCRIPT
$(document).ready(function () {
$('#source').editTable();
});
4. OPTIONS
var mytable = $('#edittable').editTable({
data: [['']], // Fill the table with a js array (this is overridden by the textarea content if not empty)
tableClass: 'inputtable', // Table class, for styling
jsonData: false, // Fill the table with json data (this will override data property)
headerCols: false, // Fix columns number and names (array of column names)
maxRows: 999, // Max number of rows which can be added
first_row: true, // First row should be highlighted?
row_template: false, // An array of column types set in field_templates
field_templates: false, // An array of custom field type objects
// Validate fields
validate_field: function (col_id, value, col_type, $element) {
return true;
}
});
5. METHODS
mytable.loadData(dataArray); // Fill the table with js data
mytable.loadJsonData(jsonData); // Fill the table with JSON data
mytable.getData(); // Get a js array of the table data
mytable.getJsonData(); // Get JSON from the table data
mytable.reset(); // Reset the table to the initial set of data
mytable.isValidated() // Check if the table pass validation set with validate_field
JS Tutorial
