Notes

  • This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports contenteditable attributes (almost all modern browsers).
  • Important: In Internet Explorer, please wrap the cell content with a DIV or SPAN as it is not possible to make table cells directly contenteditable. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).

  • Updated v2.17.6,
    • Fixed the editable_enterToAccept option to do what it was meant to do, accept when the user presses enter.
    • Added editable_autoAccept option, so that when it is true the original behavior of accepting content changes will be maintained.
    • Added editable_validate option, to allow validating the edited content.
    • Focus is now maintained within the contenteditable element after updating. This makes it easier to tab through the table while editing. This change also fixes this Stackoverflow issue.
    • The editComplete event now passes the table config variable to make it easier to access tablesorter variables.
  • Updated v2.13.2, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.
  • In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.
  • Pressing escape while editing will cancel any changes.
  • In the demo below, click in any of the first three columns to edit the content, except for the cell containing "Peter".
  • To prevent a table cell from becoming editable, add the class name "no-edit" to the cell. Set by the editable_noEdit option.

When Content Changes are Accepted

editable_enterToAccept
truefalse
editable_autoAccept true
  • Pressing alt-enter
  • Pressing enter
  • Clicking outside of the current editable content.
  • Moving the mouse outside of the current tbody (this is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen).
  • Pressing alt-enter
  • Clicking outside of the current editable content.
  • Moving the mouse outside of the current tbody.
false
  • Pressing alt-enter
  • Pressing enter
  • Pressing alt-enter
* Note The content is only accepted when the editable_validation function does not return false.

Options

Editable widget widget default options (added inside of tablesorter widgetOptions)

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDescription
Accepts any changes made to the table cell automatically v2.17.6

If the user clicks outside or tabs out of the edited cell, or moves the mouse out of the current tbody, any changes to the cell will be accepted

The only time the content is not accepted is if the user presses the escape key.

if false, the acceptance behavior follows the editable_enterToAccept setting.

Default value: true
Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
  • In tablesorter core v2.14.2, this widget was updated to allow passing a range string in this option, i.e. "0-2" instead of [0,1,2].
  • contenteditable="true" is added to cells within these columns.
Default value: [] (empty array)
Makes the user press enter to accept the content within the editable table cell

if false, clicking outside the cell will accept the content.

Default value: true
If true, the column will resort (only if already sorted) after the content has been changed.

Default value: false
Class name on table cells to search for that are not to become editable.

The search is only done within the columns set by the editable_columns option.

Default value: 'no-edit'
Event fired after the table content has been edited

Default value: 'editComplete'
Validate the content change.

Use this function to validate and/or modify the content before it is accepted.

This function must return either a string containing the modified content or false to revert the content back to it's original value. Example: 
$(function(){

  $('table').tablesorter({
    widgets : ['editable'],
    widgetOptions : {
      editable_validate : function(txt, orig){
        // only allow one word
        var t = /\s/.test(txt) ? txt.split(/\s/)[0] : txt;
        return t ? t : false;
      }
    }
  });

});
Default value: null

Demo

editable_autoAccept    : true
editable_enterToAccept : true
First Name Last Name Age Total Discount Date
Peter
Parker
28
 $9.99 20% Jul 6, 2006 8:14 AM
John
Hood
33
 $19.99 25% Dec 10, 2002 5:14 AM
Clark
Kent
18
 $15.89 44% Jan 12, 2003 11:14 AM
Bruce
Almighty
45
 $153.19 44% Jan 18, 2001 9:12 AM
Bruce
Evans
22
 $13.19 11% Jan 18, 2007 9:12 AM

Javascript


	

	
CSS

	

		

	

	
HTML