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.
editable-html-table


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

<!-- CSS -->
<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">
 
<!--JS -->
<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">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email <span style="float:right"><button id="but_add">Add New Row</button></span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td><table class="table" id="makeEditable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email <span style="float:right"><button id="but_add">Add New Row</button></span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>



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.

DEMO | DOWNLOAD

Visit official github repository for more information.



3 Replies to “Create Editable HTML Table Using Jquery Bootstrap With Add Edit Delete Feature”

  1. Hi,

    Thanks for creating great tutorials everyday. I enjoy your posts very much and sometimes incorporate the methods in my projects.

    Recently, I was trying to use SlickGrid (https://github.com/mleibman/SlickGrid) in one of my projects, but help is quite limited. As the project was based on WordPress, I found a plugin in WordPress repository based on the SlickGrid (https://wordpress.org/plugins/wp-db-table-editor/), but similarly, this plugin also had too limited help on actual implementation.

    Would you kindly create a detailed tutorial on SlickGrid?

    Best regards.

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.