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>