jQuery Plugin For Editable Table Rows - Table Edits
File Size: | 7.4 KB |
---|---|
Views Total: | 45655 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Table Edits is a very small jQuery plugin that adds inline edit capability to html table by converting table cells into input fields or select dropdowns when you start editing.
Features:
- Double click on a table row to start editing.
- Edit / cancel / save buttons.
- Supports input fields and select dropdown.
- Keyboard support.
- Callback functions.
Basic usage:
1. Load jQuery library and the jQuery Table Edits plugin's JS & CSS files in your project.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="build/table-edits.min.js"></script>
2. Load the Font Awesome for button icons (OPTIONAL).
<link href="font-awesome.min.css" rel="stylesheet">
3. Add the required data-field
to table cells that will be editable.
<td data-field="name">Dave Gamache</td> <td data-field="birthday">May 19, 2015</td> <td data-field="age">26</td> <td data-field="sex">Male</td>
4. Call the plugin on the tr
tag of your html table.
$("table tr").editable(OPTIONS);
5. Default plugin options.
$("table tr").editable({ // enable keyboard support keyboard: true, // double click to start editing dblclick: true, // enable edit buttons button: true, // CSS selector for edit buttons buttonSelector: ".edit", // uses select dropdown instead of input field dropdowns: {}, // maintains column width when editing maintainWidth: true, // callbacks for edit, save and cancel actions edit: function(values) {}, save: function(values) {}, cancel: function(values) {} });
6. Save the data to the server.
$("table tr").editable({ save: function(values) { var id = $(this).data('id'); $.post('/api/object/' + id, values); } });
Change log:
2015-10-09
- Fixed a bug where you can't save a row when using a dropdown and pressing enter on Chrome
2015-05-27
- add support for select fields
This awesome jQuery plugin is developed by nathancahill. For more Advanced Usages, please check the demo page or visit the official website.