NOTE!

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).
Note: 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.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.
Editable widget options include (defaults in parenthesis):
- editable_column ([])
  - In tablesorter core New 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].
  - Contains an array of columns numbers you want to have editable content (zero-based index). contenteditable="true" is added to cells within these columns.
- editable_enterToAccept (true) - Makes the user press enter to accept the content within the editable table cell; if false, clicking outside the cell will accept the content.
- editable_autoResort (false) - If true the column will resort (only if already sorted) after the content has been changed.
- editable_noEdit ('no-edit') - 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_column option.
- editable_editComplete ('editComplete') - Event fired after the table content has been edited.
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.
Edited content will be accepted in the following circumstances:
- Pressing enter when the editable_enterToAccept option is true.
- 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.
Edited content will not be accepted in the following circumstances:
- Pressing Escape within the editable content.

Demo

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_autoResort    : false,         // auto resort after the content has changed.
        editable_noEdit        : 'no-edit',     // class name of cell that is not editable
        editable_editComplete  : 'editComplete' // event fired after the table content has been edited
      }
    })
    .children('tbody').on('editComplete', 'td', function(){
      var $this = $(this),
        $allRows = $this.closest('table')[0].config.$tbodies.children('tr'),

        newContent = $this.text(),
        cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
        rowIndex = $allRows.index( $this.closest('tr') );
      /*
      $.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);
}

HTML

<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>
      <td class="no-edit">Peter</td>
      <td><div>Parker</div></td>
      <td><div>28</div></td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td><div>John</div></td>
      <td><div>Hood</div></td>
      <td><div>33</div></td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td><div>Clark</div></td>
      <td><div>Kent</div></td>
      <td><div>18</div></td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td><div>Bruce</div></td>
      <td><div>Almighty</div></td>
      <td><div>45</div></td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td><div>Bruce</div></td>
      <td><div>Evans</div></td>
      <td><div>22</div></td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

tablesorter

Content Editable

Flexible client-side table sorting

Demo

Javascript

CSS

HTML