jQuery.inlineEdit

jQuery.inlineEdit is a simple and lightweight jQuery plugin by Mayank K Rastogi that allows you to edit your html table rows inline.

Features:

• Edit a column's value as input types date, number, select, text, textarea
• Ability to use a column's content as value of a hidden input field
• Special type percentage to edit columns having % symbols as a number input field and append the % symbol automatically after save is successful
• Style the dynamically added fields
• Flexibility to specify different editing styles of a column in different rows
• Attach a custom date-picker on date fields
• Perform custom validation on each input field before the form is submitted
• Automatically toggles the specified containers for edit and save, cancel buttons
• Update the row with new values upon successful save operation
• Perform custom operations by specifying callback functions when save operation is successful, fails or an error occurs during the AJAX call

How to use

1. For each column in a row that you want to be editable, specify the type and name inlineEdit attributes. See the inlineEdit Attributes section for list of supported types
2. Create two divs in the column that will contain your action buttons. One of the divs should contain the edit button and the other should contain the save and cancel buttons. You may add more buttons to these divs as well

3. Add some classes to the two container divs and the buttons inside them. These containers will be toggled while editing Example:

   <tr>
       <td inlineEdit-type="hidden" inlineEdit-name="employeeId">1</td>
       <td inlineEdit-type="text" inlineEdit-name="name">Johnson</td>
       <td inlineEdit-type="select" inlineEdit-name="job" inlineEdit-data="getJobs">Admin</td>
       <td inlineEdit-type="date" inlineEdit-name="hireDate">1990-12-17</td>
       <td inlineEdit-type="number" inlineEdit-name="salary">18000</td>
       <td inlineEdit-type="percentage" inlineEdit-name="commission">0%</td>
       <td inlineEdit-type="textarea" inlineEdit-name="comments">Hard working</td>
       <td>
           <div class="inlineEdit-edit-container">
               <span class="inlineEdit-action-edit">Edit</span>
           </div>
           <div class="inlineEdit-save-container">
               <span class="inlineEdit-action-save">Save</span>&nbsp;
               <span class="inlineEdit-action-cancel">Cancel</span>
           </div>
       </td>
   </tr>
   

4. Attach the plugin to your table

   1. Specify the saveButtonURL option to tell the plugin where to POST the form data
   2. If not using the default class names for the action buttons and their containers, specify the class names in the corresponding option. See the options section for more details

   $('#employeeTable').inlineEdit({
       saveButtonURL: 'editRecord'
   });
   

5. Make sure that the server returns a JSON with the value of key success as true or false depending upon whether the save was successful or not

inlineEdit Attributes

You can customize how a dynamic field for a column is generated by adding these attributes to its td element.

• To make a column editable, you must specify the type attribute
• If edit type is select you must specify a function name in the data attribute. Check the description for data attribute for more details
• If value of edit type is date you can either use datePicker attribute or datePicker option to specify the name of the function that will be invoked to attach the date picker on that field

Note: All these attributes should be prefixed with inlineEdit-, or you can specify your own prefix by setting the attributePrefix option to the desired value.

Options