• 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).

  • In v2.23.0, the editable_columns option will now accept a string with both ranges and single columns, e.g. '1,3-5,7'.
  • In v2.22.2,
    • Shift+Enter can now be used to start a new line even if editable_enterToAccept is true.
    • Sorting is now delayed until the editable content has been updated in the cache. This no longer relies on hovering over the table header as this would not be adequate on touch devices.
  • In v2.22.0,
    • The cell content now only automatically updates when the user hovers over the table header. Prior to this version, the automatic update would occur when the mouse left the tbody of the table. The reason this is necessary is because initiating a sort would change the row indexing set prior to the cell content being updated, so the cache would end up not matching the table content.
    • Modified the editable_trimContent option to only trim content when set.
    • The widget now works with the contenteditable html (using jQuery's .html()); previously, the widget would only manipulate the text (using jQuery .text()), so any HTML would get stripped out.
      *Note* Because of this change, if the user presses Enter, a <div> will be automatically inserted by the browser (not the widget) and any content entered will be added inside this "new line" div. If this is undesirable, use the editable_blur callback to modify the content.
    • If the cell content is already wrapped in a div or span, that element will be made contenteditable. Otherwise any direct children of the table cell will be made contenteditable; prior to this update, all direct child elements (including <br>s were made contenteditable by mistake).
  • 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.

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

$(function() {

$("#table")
.tablesorter({
theme : 'blue',

widgets: ['editable'],
widgetOptions: {
editable_columns : [0,1,2], // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
editable_enterToAccept : true, // press enter to accept content, or click outside if false
editable_autoAccept : true, // accepts any changes made to the table cell automatically (v2.17.6)
editable_autoResort : false, // auto resort after the content has changed.
editable_validate : null, // return a valid string: function(text, original, columnIndex){ return text; }
editable_focused : function(txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
$element.addClass('focused');
},
editable_blur : function(txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
$element.removeClass('focused');
},
editable_selectAll : function(txt, columnIndex, $element){
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
// only select everthing within the element when the content starts with the letter "B"
return /^b/i.test(txt) && columnIndex === 0;
},
editable_wrapContent : '<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete
editable_trimContent : true, // trim content ( removes outer tabs & carriage returns )
editable_noEdit : 'no-edit', // class name of cell that is not editable
editable_editComplete : 'editComplete' // event fired after the table content has been edited
}
})
// config event variable new in v2.17.6
.children('tbody').on('editComplete', 'td', function(event, config){
var $this = $(this),
newContent = $this.text(),
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id

// Do whatever you want here to indicate
// that the content was updated
$this.addClass( 'editable_updated' ); // green background + white text
setTimeout(function(){
$this.removeClass( 'editable_updated' );
}, 500);

/*
$.post("mysite.php", {
"row" : rowIndex,
"cell" : cellIndex,
"content" : newContent
});
*/
});

});

CSS

.tablesorter tbody > tr > td[contenteditable=true]:focus {
outline: #08f 1px solid;
background: #eee;
resize: none;
}
td.no-edit, span.no-edit {
background-color: rgba(230,191,153,0.5);
}
.focused {
color: blue;
}
td.editable_updated {
background-color: green;
color: white;
}

HTML

<table id="table" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr id="db-row-344">
<td class="no-edit">Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr id="db-row-884">
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr id="db-row-234">
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr id="db-row-756">
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr id="db-row-232">
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table>