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

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.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/tableEdit.css">
<script src="js/core.js"></script>
<script src="js/create_table.js"></script>
<script src="js/controllers_table.js"></script>
<script src="js/events_table.js"></script>
<script src="js/callbacks_bootstrap_modal.js"></script>
<script src="js/callbacks_define_types.js"></script>

Create editable table form simple html table

HTML

<table id="from-table" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>head 1</th>
            <th>head 2</th>
            <th>head 3</th>
            <th>head 4</th>
            <th>head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value</td>
            <td colspan="2" class="warning colspan">value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>

JS

Call plugin’s function to make above table editable

jQuery(document).ready(function($){
 
    $('#from-table').tableEdid();
 
});



Create editable table form HTML Textarea

HTML

<textarea id="from-textarea" class="hidden">
 
    [
        [ {"value":"head 1"}, {"value":"head 2"}, {"value":"head 3"}, {"value":"head 4"}, {"value":"head 5","settings":{"class":"danger"}} ],
        [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
        [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
        [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
        [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ],
        [ {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value"}, {"value":"value","settings":{"class":"warning"}} ]
    ]
 
</textarea>

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.



One Reply to “Creating an editable table from an array, textarea, table using jQuery TableEdit Plugin”

  1. Thx its nice. There are many editable tables tutorials on the tutorial sites, but none where they have a search box to filter the table. Pls do that.thx

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.