HTML Javascript JQuery Twitter Bootstrap

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

editable html table using jquery
Written by VithalReddy.M.B

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:

  1. 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>
  2. 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.
  3. We are going to use, a plugin called bootstable by t-Edson which can be found here.
  4. 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>
  5. 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.
  6. 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
  7. 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>

editable html table using jquery

 

Github Repo Link: Editable HTML Table

READ  auto-refresh page once only after first load - Using JavaScript / JQuery

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.

 

About the author

VithalReddy.M.B

Vithalreddy.M.B is the Editor of VMRworld.com & stackFame.com with a focus on startups, Startup News, Business, and Technology.He is also an Electrical & Electronics Engineer, Technology Lover, and Entrepreneur by choice.Started His first startup at 21.