Create Editable HTML Table Using Jquery Bootstrap With Add Edit Delete Feature

Using Javascript libraries you can make editable table easily with feature like inline edit delete etc. I found a awesome plugin on github to make it easy called bootstable, This plugin is quick to create editable table like BOSS. “boots_table” is a javascript library, that lets convert a HTML static table to a editable table. A table is made editable, including several buttons to perform the edition actions. Bootstrap is necessary to format correctly the controls used, and to draw icons.No database connection is included. The library was designed to work offline. But you can customize as per need Feature and store updated value into mysql database on add, edit, delete button call.

Integrate Editable Table Using Jquery Bootstrap

“boots_table” is a javascript library, that lets convert a HTML static table to a editable table

Libraries

First Include all dependent bootstrap libraries on page after that include bootstable.min.js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous">script>
<script src="bootstable.min.js">script>

HTML

Following is the sample HTML table.

<table class="table" id="makeEditable">
    

JS

Finally call SetEditable() function on table id to make html table editable.

$('#makeEditable').SetEditable();

The above one line function will make table editable with edit and delete feature If you want to add more row feature simply pass one more properties.

<script>
 $('#makeEditable').SetEditable({ $addButton: $('#but_add')});
script>

See live demo and download source code.

Visit official github repository for more information.

Related