- Jquery Dialog Box Example
- Inline Table Editing Using Jquery Dialogue
- Javascript Inline Editing
- Jquery Inline Edit
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Tabledit is a small jQuery plugin that provides AJAX-enabled in-place editing for your table cells. The plugin has the ability to transform tables cells into input fields or select dropdowns with custom trigger events, to give the visitors a quick way to change cell values directly.
See also:
Basic usage:
1. Add the jQuery tabledit plugin after jQuery library.
2. Call the plugin on your existing table and specify the editable columns whatever you like.
3. All the plugin options.
Change logs:
2015-04-21
- Added 'bower.json' to use this package manager
- Added 'tbody' in the selector during the construction of the structure, to avoid problems with the 'tfoot'
- Now when you tab in a row, the form is saved. Only if there is no save button
2015-04-03
- Updated 'example.php' file
- Updated project page with examples and documentation
- Now if 'onAjax()' hook returns false, does not send the ajax request
- Added 'rowIdentifier' option to change the name of attribute in td element for the row identifier
- Fixed bug that allows you to change to edit mode with mouse click when the line was deleted
- Quick fix for issue that sometimes could not remove the warning class on the edited rows
2015-03-10
- Improved the select element
- Does not add hidden save button if the 'editButton' option is false
- Does not add hidden restore button if the 'deleteButton' option is false
- Added a new option 'autoFocus' to enable or not the focus in the first input when click in save button
- Added a new hook 'onAjax(action, serialize)' that runs before the ajax request
Jquery Dialog Box Example
2015-03-08
- Added 'saveButton' and 'restoreButton' options.
- Added 'toolbarClass' and 'groupClass' options.
- Changed 'removeButton' option to 'deleteButton'.
- Changed 'remove' action to 'delete'.
- Removed 'textSelection' option, using CSS to prevent the text is selected with double click.
- Removed 'confirmText' option, because a button was created to confirm the removal.
- Removed form wrapped on table, because now it serialize inputs instead of the form.
- In 'buttons' option now have a new child 'action' to change name of action input ('edit', 'delete' and 'restore').
- Redesign of toolbox and changed name to toolbar.
- Minor code improvement.
- Fixed some bugs.
Inline Table Editing Using Jquery Dialogue
2015-03-06
- Fixed bug when creates the form wrapped on table.
2015-02-09
Javascript Inline Editing
- Added toolbox column with edit and remove buttons.
- Added effect on table row when ajax request fails.
- Added effect on table row when changes are saved with success.
- Added 'onAlways()' hook, that is executed whenever there is an ajax request.
- Change 'onComplete(response)' hook to 'onSuccess(data, textStatus, jqXHR)'.
- Change 'onError()' hook to 'onFail(jqXHR, textStatus, errorThrown)'.
- Fixed some minor bugs.
- Minor code improvement.
This awesome jQuery plugin is developed by markcell. For more Advanced Usages, please check the demo page or visit the official website.
Jquery Inline Edit
- Prev: Simple jQuery & CSS3 Based Responsive Table Plugin
- Next: jQuery Plugin For Creating Collapsible Table Rows - aCollapTable