<li>This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports <ahref="http://caniuse.com/#feat=contenteditable"><code>contenteditable</code> attributes</a> (almost all modern browsers).</li>
<li><spanclass="label warning">Important</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <ahref="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).<br><br></li>
<li>Updated <spanclass="version">v2.17.6</span>,
<ul>
<li>Fixed the <code>editable_enterToAccept</code> option to do what it was meant to do, accept when the user presses enter.</li>
<li>Added <code>editable_autoAccept</code> option, so that when it is <code>true</code> the original behavior of accepting content changes will be maintained.</li>
<li>Added <code>editable_validate</code> option, to allow validating the edited content.</li>
<li>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 <ahref="http://stackoverflow.com/q/24947995/145346">this Stackoverflow issue</a>.</li>
<li>The <code>editComplete</code> event now passes the table <code>config</code> variable to make it easier to access tablesorter variables.</li>
<li>Updated <spanclass="version updated">v2.13.2</span>, 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.</li>
<li>In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
<li>Pressing escape while editing will cancel any changes.</li>
<li>In the demo below, click in any of the first three columns to edit the content, except for the cell containing <spanclass="no-edit">"Peter"</span>.</li>
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell. Set by the <code>editable_noEdit</code> option.</li>
<liclass="color3">Clicking outside of the current editable content.</li>
<liclass="color3">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).</li>
</ul>
</td>
<td>
<ul>
<liclass="color1">Pressing alt-enter</li>
<liclass="color3">Clicking outside of the current editable content.</li>
<liclass="color3">Moving the mouse outside of the current tbody.</li>
</ul>
</td>
</tr>
<tr>
<th>false</th>
<td>
<ul>
<liclass="color1">Pressing alt-enter</li>
<liclass="color2">Pressing enter</li>
</ul>
</td>
<td>
<ul>
<liclass="color1">Pressing alt-enter</li>
</ul>
</td>
</tr>
</tbody>
</table>
* <spanclass="label label-info">Note</span> The content is only accepted when the <code>editable_validation</code> function <em>does not</em> return <code>false</code>.
<h4>Editable widget widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div>
<spanclass="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all) or double click to update the browser location.
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
<divclass="collapsible">
<ul>
<li>In tablesorter core <spanclass="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
<li><code>contenteditable="true"</code> is added to cells within these columns.</li>
This function must return either a string containing the modified content or <code>false</code> to revert the content back to it's original value. Example:
