Creating an editable table from an array, textarea, table using jQuery Table Edit Plugin

0 317

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.

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.

Leave A Reply

Your email address will not be published.