Creating an editable table from an array, textarea, table using jQuery TableEdit Plugin

by

Today I am going to share an useful jquery plugin to creating an editable table from an array, textarea, html table, It is helpful to add client side quick editable feature on your website with lot’s of extra feature like add and delete rows, cells. The plugin contains enough options and callback functions for quick customization for your task.
editable-table

Creating an editable table

follow below steps to quickly add editable table feature on your website.

Libraries

Include latest jQuery core library and other plugin’s resources on the web page.

Create editable table form simple html table

HTML


    
        

            head 1
            head 2
            head 3
            head 4
            head 5
        

    
    
        

            value
            value
            value
            value
        

        

            value
            value
            value
            value
            value

JS

Call plugin’s function to make above table editable

jQuery(document).ready(function($){

    $('#from-table').tableEdid();

});



Create editable table form HTML Textarea

HTML

JS

jQuery(document).ready(function($){

    $('#from-textarea').tableEdid();

});



Create editable table form HTML Array or Json

JS

var Table = [
    [ {"value":"head 1"}, {"value":"head 2"}, {"value":"head 3"}, {"value":"head 4"}, {"value":"head 5"} ],
    [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
    [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
    [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
    [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ],
    [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"} ]
];

Table.tableEdid();

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.



Published by Rohit