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

editable-table

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>
  
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  
  <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">
    
>head 1>head 2>head 3>head 4>head 5
>value="2" class="warning colspan">value>value>value
>value>value>value>value>value

>

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.

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. Required fields are marked *

Top