Minimal Inline Editor For HTML Table – HTMLInlineEdit

Preview:

Description:

HTMLInlineEdit is a lightweight native JavaScript library that provides a basic HTML5 inline editing functionality on table cells.

How to use it:

Set the entry values & names of your table cells.

<td data-inlineValue="Cloud" data-inlineName="user">Cloud</td>
<td data-inlineValue="Mercenary" data-inlineName="title">Mercenary</td>
<td data-inlineValue="Loves using large swords" data-inlineName="remark">Loves using large swords</td>

Create a button to enter the ‘edit’ mode.

<td data-inlineMode="button"><input type="button" value="Edit" onclick="inlineEdit('TableRow', defaultOptions)"/></td>

All possible options with default values.

var defaultSampleOptions = {
    "updateCell": inlineDefaultUpdateCell,
    "finish": inlineDefaultFinish,
    "finishCallback": defaultSampleCallback,
    "finishCell": inlineDefaultFinishCell
};

Changelog:

05/27/2018

• Support for type tel and email