Minimal Inline Editor For HTML Table – HTMLInlineEdit

Category: Javascript , Table | May 27, 2018
Author:sheryiu
Views Total:2,787 views
Official Page:Go to website
Last Update:May 27, 2018
License:MIT

Preview:

Minimal Inline Editor For HTML Table – HTMLInlineEdit

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

You Might Be Interested In:


Leave a Reply