I have tablesorter working for a table, like so:
$("#mytable").tablesorter({
// set initial sort
sortList: tablesorting,
emptyTo: 'none',
widgets: ["stickyHeaders", "resizable", "filter", "editable"],
widgetOptions: {
...
editable_columns: [6],
editable_editComplete: 'editComplete',
editable_enterToAccept: true,
editable_noEdit: 'missing'
}
})
Periodically I replace some of the rows' HTML with jquery, however when this happens, the content-editable column no longer works.
How can I get tablesorter to reapply the content editable widget after changing the row?
The editable widget was written to use delegated events. And only elements with a set contenteditable
attribute are targeted (not set to "false"
). So when you add a new row, make sure the table cells contain elements with contenteditable="true"
attribute applied.
Note that IE does not allow making TR, TH or TD table cells directly editable, so add a div or span inside:
<tr>
<td><div contenteditable="true">Foo</div></td>
<td><div contenteditable="true">Bar</div></td>
</tr>
Once that is done, the editable widget should automagically allow work on that row.