NOTE!

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>