Editable HTML Table Using Javascript/Jquery With Add Edit Delete Rows

Every Web Developer and Content Creator need to use HTML Tables each time, They need to show some data in table structure, all thanks modern web technologies, nowadays web has become more dynamic and people are not interested in those boring static websites and in this web How to Tutorial we are going to use modern javascript, jquery and Twitter Bootstrap power to make Our HTML Tables Dynamic and Cool Looking in other words How to add, edit and delete rows of a HTML table with jQuery/Javascript. So let’s learn how to create editable HTML table.

What you’ll be able to do after finishing this tutorial:

Create Editable HTML Table Using Javascript, Jquery, and Bootstrap With Add, Edit, and Delete Features.
add, edit and delete rows of an HTML table with jQuery or Javascript.
Add, Edit, And Delete Rows From Table Dynamically Using Power of JavaScript.
Editable Dynamic HTML Table which can be edited offline

Let’s start:

We will be using bootstrap frontend framework to make things look prettier on the frontend.

Steps:

create a static HTML table using bootstrap with dummy data or your data.

<table class="table table-bordered table-striped table-hover table-condensed table-responsive">
  <thead>
    <tr>
      <th>
        Full Name
      </th>
      <th>
        WebSite
      </th>
      <th>
        Contact No
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        John M
      </td>
      <td>
        http://john-m.com
      </td>
      <td>
        9876543210
      </td>
    </tr>
    <tr>
      <td>
        Ariana Smith
      </td>
      <td>
        https://araiana-smith.com
      </td>
      <td>
        1234567890
      </td>
    </tr>
    <tr>
      <td>
        Silver Bourne
      </td>
      <td>
        https://silver-bourne.com
      </td>
      <td>
        988889888
      </td>
    </tr>
    <tr>
      <td>
        Rahul Ray
      </td>
      <td>
        https://rahul-ray.com
      </td>
      <td>
        9797979797
      </td>
    </tr>
  </tbody>
</table>

This is a simple HTML table containing data of individuals and now we will make it dynamic using javascript or jquery to be able to add, edit and delete rows.
We are going to use, a plugin called bootstable by t-Edson which can be found here.

Let’s setup bootstrap and bootstable in our HTML file and our overall HTML file will look like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <!-- CSS files-->
  <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">
   </head>
  <body>
    <!-- page content -->

<table class="table table-bordered table-striped table-hover table-condensed table-responsive">
  <thead>
    <tr>
      <th>
        Full Name
      </th>
      <th>
        WebSite
      </th>
      <th>
        Contact No
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        John M
      </td>
      <td>
        http://john-m.com
      </td>
      <td>
        9876543210
      </td>
    </tr>
    <tr>
      <td>
        Ariana Smith
      </td>
      <td>
        https://araiana-smith.com
      </td>
      <td>
        1234567890
      </td>
    </tr>
    <tr>
      <td>
        Silver Bourne
      </td>
      <td>
        https://silver-bourne.com
      </td>
      <td>
        988889888
      </td>
    </tr>
    <tr>
      <td>
        Rahul Ray
      </td>
      <td>
        https://rahul-ray.com
      </td>
      <td>
        9797979797
      </td>
    </tr>
  </tbody>
</table>
    <!--JS Files-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="bootstable.min.js"></script>
  </body>
</html>

Now we need to make changes in our HTML table to work with bootstable with custom id for editing purposes, we give id of DyanmicTable to out HTML table and we will add a new column to add edit and delete buttons in the table.

add the following script DyanmicTable in it.

  $('#DyanmicTable').SetEditable({
                 
                $addButton: $('#add_new-row')
  });


//if you to alert or do something after edit, delete then use following functions
    onEdit: function() {},   //Edit event
    onDelete: function() {}, //Delete event
    onAdd: function() {}     //Add event

Overall final code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dynamic Editable HTML Table using Javascript, Jquery and Bootstrap with add, edit, and Delete Options</title>
    <!-- CSS files-->
  <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">
   </head>
  <body>
    <!-- page content -->
    <div style="text-align:right; font-size:18px; width:95%; margin-top:1%"><a href="https://stackfame.com/editable-html-table-using-javascript-jquery/" >Tutorial  | <a href="https://stackfame.com/">StackFAME Homepage</a></div>
 <br>
    <h1 class="col-md-12 text-center" style="color: black">Dynamic Editable HTML Table using Javascript, Jquery and Bootstrap with add, edit, and Delete Options</h1>
   
    
    <br>
    <div class="table-responsive col-md-10">

<table class="table table-bordered table-striped table-hover table-condensed  text-center" id="DyanmicTable">
  <thead>
    <tr>
      <th class="text-center">
        Full Name
      </th>
      <th class="text-center">
        WebSite
      </th>
      <th class="text-center">
        Contact No
      </th>
      <th class="text-center">
        <button id="addNewRow" class="btn btn-primary btn-sm">Add New Row</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        John M
      </td>
      <td>
        http://john-m.com
      </td>
      <td>
        9876543210
      </td>
    </tr>
    <tr>
      <td>
        Ariana Smith
      </td>
      <td>
        https://araiana-smith.com
      </td>
      <td>
        1234567890
      </td>
    </tr>
    <tr>
      <td>
        Silver Bourne
      </td>
      <td>
        https://silver-bourne.com
      </td>
      <td>
        988889888
      </td>
    </tr>
    <tr>
      <td>
        Rahul Ray
      </td>
      <td>
        https://rahul-ray.com
      </td>
      <td>
        9797979797
      </td>
    </tr>
  </tbody>
</table>
</div>
    <!--JS Files-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="bootstable.min.js"></script>
<script>
 $('#DyanmicTable').SetEditable({ $addButton: $('#addNewRow')});
</script>
  </body>
</html>

[su_button url=”https://vithalreddy.github.io/editable-html-table-js/” target=”blank” style=”flat” size=”8″ center=”yes” radius=”0″]DEMO[/su_button] [su_button url=”https://github.com/vithalreddy/editable-html-table-js/archive/master.zip” target=”blank” style=”flat” size=”8″ center=”yes” radius=”0″]Download[/su_button]

Github Repo Link: Editable HTML Table

Conclusion:

This shows how easy javascript has made life of web developers and modern web applications.if you have any queries, please comment below and don’t forget to subscibe to our newsletter for awesome freebies and articles every week.

5 thoughts on “Editable HTML Table Using Javascript/Jquery With Add Edit Delete Rows”

Amel Amoula

December 11, 2017 at 1:44 am

Thank you so much , i want to check validation and change events (warn about invalid input or
prevent invalid changes on an keyup event if the input values match with regular expressions ( like noun , average, field, …)) and get data from mysql table and display it instead of defined values using php, how can i melt all this please
manoj

May 27, 2021 at 11:41 am

but on reloading the page it doesn’t show update
- Vithal Reddy
  
  September 12, 2021 at 10:35 am
  
  you’ll have to persist data in some kind of backend or localstorage and retrieve it on page load.
Sam

November 17, 2021 at 5:49 am

Hi Vithal, any tips on how to do this? For example saving the changes made to an xml file.
- Vithal Reddy
  
  November 19, 2021 at 9:40 am
  
  Hi Sam,
  you can make use of OnEdit, OnAdd and onDelete functions to achieve this to persist changes in backend or json.

Conclusion:

5 thoughts on “Editable HTML Table Using Javascript/Jquery With Add Edit Delete Rows”

Leave a Comment Cancel reply