In this article, I will explain with an example, Create editable HTML table using jQuery Bootstrap with add edit delete feature.

In this article, We will cover the below points in the

  • How to edit and update table row dynamically in jQuery and HTML
  • Edit individual table cells Using jQuery
  • Create editable HTML table using jQuery Bootstrap with add edit delete feature.
  • How to add edit and Delete rows of an HTML table with jquery.

Using an Editable HTML Table one can perform CRUD operations in data i.e. Insert, Edit, Update and Delete operations using an HTML Table in jQuery and HTML.

Benefits of Using Bootstrap HTML Table
HTML tables are lightweight as compared to third-party control js Control. Here I have used bootstrap for a good look and responsiveness, but you can write your own CSS.

Below the HTML code for that, after running in the browser the page will look like the below image:

I have created a form with the “add Customer” button. at the click of a “add Customer ” button, we are adding the rows in the HTML table. Our form has CustomerID,CustomerName,ContactName,Address,PostalCode fields.

How to edit and update table row dynamically in jQuery and HTML
Html 

<!DOCTYPE html>
<html>
<head>
    <title> Use of JQuery to Add Edit Delete Table Row </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <div class="container">
        <h1> How to insert,edit,delete selected row from html table using jquery </h1>
        <form id="addcustomerform">

            <div class="form-group">
                <label>CustomerID:</label>
                <input type="text" name="txtCustomerID" id="txtCustomerID" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>CustomerName:</label>
                <input type="text" name="txtCustomerName" id="txtCustomerName" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>ContactName:</label>
                <input type="text" name="txtContactName" id="txtContactName" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>Address:</label>
                <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
            </div>
            <div class="form-group">
                <label>PostalCode:</label>
                <input type="text" name="txtPostalCode" id="txtPostalCode" class="form-control" value="" required="">
            </div>
            <button type="submit" id="btnaddcustomer" class="btn btn-primary save-btn">add Customer</button>

        </form>
        <br />
        <fieldset>
            <legend>Customer List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CustomerName</th>
                        <th>ContactName</th>
                        <th>Address</th>
                        <th>PostalCode</th>
                    </tr>
                </thead>
                <tbody id="tblbody">

                </tbody>
            </table>
        </fieldset>
    </div>
</body>
</html>

Add rows in the table using Jquery

Now let’s write the script code for adding the customer rows in the table.

  <script type="text/javascript">
    //add customer
    $("#btnaddcustomer").on("click", function (e) {
        e.preventDefault();
        var CustomerID = $("#txtCustomerID").val();
        var CustomerName = $("#txtCustomerName").val();
        var ContactName = $("#txtContactName").val();
        var Address = $("#txtAddress").val();
        var PostalCode = $("#txtPostalCode").val();
        var tablerow = "<tr data-CustomerID='" + CustomerID + "' data-CustomerName='" + CustomerName + "'"
                        + "data-ContactName='" + ContactName + "' data-Address='" + Address + "' data-PostalCode='" + PostalCode + "'>"
                      + "<td>" + CustomerID + "</td>"
                      + "<td>" + CustomerName + "</td>"
                      + "<td>" + ContactName + "</td>"
                      + "<td>" + Address + "</td>"
                      + "<td>" + PostalCode + "</td>"
                      + "<td>" +
                      "<button class='btn btn-info btn-xs btn-editcustomer'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                      "<button class='btn btn-danger btn-xs btn-deletecustomer'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                      + "</td>"
                      + "</tr>";
        debugger;
        $("#tblbody").append(tablerow);
        $("input[type='text']").each(function () {
            $(this).val("");
        });
        $("#textarea").val('');
    });
    </script>

How to edit selected row from html table using jquery

Now we want to use jQuery to click on a table cell and edit the data.

On Click of the edit button, we are replacing the table cell with a text input and calls custom events so we can handle whatever use case cancel, update, delete action.


    <script type="text/javascript">
    //handle edit button click
    $("#tblbody").on("click", ".btn-editcustomer", function () {
        debugger;
        var CustomerID = $(this).parents("tr").attr('data-CustomerID');
        var CustomerName = $(this).parents("tr").attr('data-CustomerName');
        var ContactName = $(this).parents("tr").attr('data-ContactName');
        var Address = $(this).parents("tr").attr('data-Address');
        var PostalCode = $(this).parents("tr").attr('data-PostalCode');

        $(this).parents("tr").find("td:eq(0)").html('<input name="txtupdate_CustomerID" id="txtupdate_CustomerID" value="' + CustomerID + '">');
        $(this).parents("tr").find("td:eq(1)").html('<input name="txtupdate_customerName" id="txtupdate_customerName" value="' + CustomerName + '">');
        $(this).parents("tr").find("td:eq(2)").html('<input name="txtupdate_ContactName" id="txtupdate_ContactName" value="' + ContactName + '">');
        $(this).parents("tr").find("td:eq(3)").html('<input name="txtupdate_Address" id="txtupdate_Address" value="' + Address + '">');
        $(this).parents("tr").find("td:eq(4)").html('<input name="txtupdate_PostalCode" id="txtupdate_PostalCode" value="' + PostalCode + '">');



        $(this).parents("tr").find("td:eq(5)").prepend("<button class='btn btn-primary btn-xs btn-updatecustomer'><i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
            + "<button class='btn btn-warning btn-xs btn-cancelupdate'><i class='fa fa-times' aria-hidden='true'>Cancel</button>")
        $(this).hide();
    });

    $("#tblbody").on("click", ".btn-cancelupdate", function () {
        debugger;
        var CustomerID = $(this).parents("tr").attr('data-CustomerID');
        var CustomerName = $(this).parents("tr").attr('data-CustomerName');
        var ContactName = $(this).parents("tr").attr('data-ContactName');
        var Address = $(this).parents("tr").attr('data-Address');
        var PostalCode = $(this).parents("tr").attr('data-PostalCode');

        $(this).parents("tr").find("td:eq(0)").text(CustomerID);
        $(this).parents("tr").find("td:eq(1)").text(CustomerName);
        $(this).parents("tr").find("td:eq(2)").text(ContactName);
        $(this).parents("tr").find("td:eq(3)").text(Address);
        $(this).parents("tr").find("td:eq(4)").text(PostalCode);


        $(this).parents("tr").find(".btn-editcustomer").show();
        $(this).parents("tr").find(".btn-updatecustomer").remove();
        $(this).parents("tr").find(".btn-cancelupdate").remove();
    });

    $("#tblbody").on("click", ".btn-updatecustomer", function () {
        var CustomerID = $(this).parents("tr").find("input[name='txtupdate_CustomerID']").val();
        var CustomerName = $(this).parents("tr").find("input[name='txtupdate_customerName']").val();
        var ContactName = $(this).parents("tr").find("input[name='txtupdate_ContactName']").val();
        var Address = $(this).parents("tr").find("input[name='txtupdate_Address']").val();
        var PostalCode = $(this).parents("tr").find("input[name='txtupdate_PostalCode']").val();

        debugger;

        $(this).parents("tr").find("td:eq(0)").text(CustomerID);
        $(this).parents("tr").find("td:eq(1)").text(CustomerName);
        $(this).parents("tr").find("td:eq(2)").text(ContactName);
        $(this).parents("tr").find("td:eq(3)").text(Address);
        $(this).parents("tr").find("td:eq(4)").text(PostalCode);

        $(this).parents("tr").attr('data-CustomerID', CustomerID);
        $(this).parents("tr").attr('data-CustomerName', CustomerName);
        $(this).parents("tr").attr('data-ContactName', ContactName);
        $(this).parents("tr").attr('data-Address', Address);
        $(this).parents("tr").attr('data-PostalCode', PostalCode);


        $(this).parents("tr").find(".btn-editcustomer").show();
        $(this).parents("tr").find(".btn-cancelupdate").remove();
        $(this).parents("tr").find(".btn-updatecustomer").remove();
    });

    </script>

edit customer list

Delete row from HTML table using Jquery

<script type="text/javascript">
    //delete row from the table
    $("#tblbody").on("click", ".btn-deletecustomer", function () {
        $(this).parents("tr").remove();
    });
</script>

Complete code for crud operations in html table using jquery

<!DOCTYPE html>
<html>
<head>
    <title> Use of JQuery to Add Edit Delete Table Row </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <div class="container">
        <h1> How to insert,edit,delete selected row from html table using jquery </h1>
        <form id="addcustomerform">

            <div class="form-group">
                <label>CustomerID:</label>
                <input type="text" name="txtCustomerID" id="txtCustomerID" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>CustomerName:</label>
                <input type="text" name="txtCustomerName" id="txtCustomerName" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>ContactName:</label>
                <input type="text" name="txtContactName" id="txtContactName" class="form-control" value="" required="">
            </div>
            <div class="form-group">
                <label>Address:</label>
                <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
            </div>
            <div class="form-group">
                <label>PostalCode:</label>
                <input type="text" name="txtPostalCode" id="txtPostalCode" class="form-control" value="" required="">
            </div>
            <button type="submit" id="btnaddcustomer" class="btn btn-primary save-btn">add Customer</button>

        </form>
        <br />
        <fieldset>
            <legend>
                Customer List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CustomerName</th>
                        <th>ContactName</th>
                        <th>Address</th>
                        <th>PostalCode</th>
                    </tr>
                </thead>
                <tbody id="tblbody"></tbody>
            </table>
        </fieldset>
    </div>
</body>
</html>

<script type="text/javascript">
    //add customer
    $("#btnaddcustomer").on("click", function (e) {
        e.preventDefault();
        var CustomerID = $("#txtCustomerID").val();
        var CustomerName = $("#txtCustomerName").val();
        var ContactName = $("#txtContactName").val();
        var Address = $("#txtAddress").val();
        var PostalCode = $("#txtPostalCode").val();
        var tablerow = "<tr data-CustomerID='" + CustomerID + "' data-CustomerName='" + CustomerName + "'"
                        + "data-ContactName='" + ContactName + "' data-Address='" + Address + "' data-PostalCode='" + PostalCode + "'>"
                      + "<td>" + CustomerID + "</td>"
                      + "<td>" + CustomerName + "</td>"
                      + "<td>" + ContactName + "</td>"
                      + "<td>" + Address + "</td>"
                      + "<td>" + PostalCode + "</td>"
                      + "<td>" +
                      "<button class='btn btn-info btn-xs btn-editcustomer'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                      "<button class='btn btn-danger btn-xs btn-deletecustomer'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                      + "</td>"
                      + "</tr>";
        debugger;
        $("#tblbody").append(tablerow);
        $("input[type='text']").each(function () {
            $(this).val("");
        });
        $("#textarea").val('');
    });
</script>
<script type="text/javascript">
    //handle edit button click
    $("#tblbody").on("click", ".btn-editcustomer", function () {
        debugger;
        var CustomerID = $(this).parents("tr").attr('data-CustomerID');
        var CustomerName = $(this).parents("tr").attr('data-CustomerName');
        var ContactName = $(this).parents("tr").attr('data-ContactName');
        var Address = $(this).parents("tr").attr('data-Address');
        var PostalCode = $(this).parents("tr").attr('data-PostalCode');

        $(this).parents("tr").find("td:eq(0)").html('<input name="txtupdate_CustomerID" id="txtupdate_CustomerID" value="' + CustomerID + '">');
        $(this).parents("tr").find("td:eq(1)").html('<input name="txtupdate_customerName" id="txtupdate_customerName" value="' + CustomerName + '">');
        $(this).parents("tr").find("td:eq(2)").html('<input name="txtupdate_ContactName" id="txtupdate_ContactName" value="' + ContactName + '">');
        $(this).parents("tr").find("td:eq(3)").html('<input name="txtupdate_Address" id="txtupdate_Address" value="' + Address + '">');
        $(this).parents("tr").find("td:eq(4)").html('<input name="txtupdate_PostalCode" id="txtupdate_PostalCode" value="' + PostalCode + '">');



        $(this).parents("tr").find("td:eq(5)").prepend("<button class='btn btn-primary btn-xs btn-updatecustomer'><i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
            + "<button class='btn btn-warning btn-xs btn-cancelupdate'><i class='fa fa-times' aria-hidden='true'>Cancel</button>")
        $(this).hide();
    });

    $("#tblbody").on("click", ".btn-cancelupdate", function () {
        debugger;
        var CustomerID = $(this).parents("tr").attr('data-CustomerID');
        var CustomerName = $(this).parents("tr").attr('data-CustomerName');
        var ContactName = $(this).parents("tr").attr('data-ContactName');
        var Address = $(this).parents("tr").attr('data-Address');
        var PostalCode = $(this).parents("tr").attr('data-PostalCode');

        $(this).parents("tr").find("td:eq(0)").text(CustomerID);
        $(this).parents("tr").find("td:eq(1)").text(CustomerName);
        $(this).parents("tr").find("td:eq(2)").text(ContactName);
        $(this).parents("tr").find("td:eq(3)").text(Address);
        $(this).parents("tr").find("td:eq(4)").text(PostalCode);


        $(this).parents("tr").find(".btn-editcustomer").show();
        $(this).parents("tr").find(".btn-updatecustomer").remove();
        $(this).parents("tr").find(".btn-cancelupdate").remove();
    });

    $("#tblbody").on("click", ".btn-updatecustomer", function () {
        var CustomerID = $(this).parents("tr").find("input[name='txtupdate_CustomerID']").val();
        var CustomerName = $(this).parents("tr").find("input[name='txtupdate_customerName']").val();
        var ContactName = $(this).parents("tr").find("input[name='txtupdate_ContactName']").val();
        var Address = $(this).parents("tr").find("input[name='txtupdate_Address']").val();
        var PostalCode = $(this).parents("tr").find("input[name='txtupdate_PostalCode']").val();

        debugger;

        $(this).parents("tr").find("td:eq(0)").text(CustomerID);
        $(this).parents("tr").find("td:eq(1)").text(CustomerName);
        $(this).parents("tr").find("td:eq(2)").text(ContactName);
        $(this).parents("tr").find("td:eq(3)").text(Address);
        $(this).parents("tr").find("td:eq(4)").text(PostalCode);

        $(this).parents("tr").attr('data-CustomerID', CustomerID);
        $(this).parents("tr").attr('data-CustomerName', CustomerName);
        $(this).parents("tr").attr('data-ContactName', ContactName);
        $(this).parents("tr").attr('data-Address', Address);
        $(this).parents("tr").attr('data-PostalCode', PostalCode);


        $(this).parents("tr").find(".btn-editcustomer").show();
        $(this).parents("tr").find(".btn-cancelupdate").remove();
        $(this).parents("tr").find(".btn-updatecustomer").remove();
    });

</script>
<script type="text/javascript">
    //delete row from the table
    $("#tblbody").on("click", ".btn-deletecustomer", function () {
        $(this).parents("tr").remove();
    });
</script>

crud operations in html table using jquery

Why use Bootstrap Table?

It is a useful tool for web designers, using which web designing can be done easily. Earlier a website was opened using computer and laptop, but today this work is being done the most in mobile. Now we can open any site using our mobile.

Today, most of the mobiles are being used to access the Internet. That’s why web designers have to keep in mind that the website can be easily opened on all devices and for this you can take help of Bootstrap.

There are many benefits of using Bootstrap, about which we are telling you further:

  • This framework is very easy to use. If you have knowledge of CSS and HTML then you can use Bootstrap and can also make changes in it.
  • This also saves time. Codes are already found in Bootstrap, so that if some changes have to be made then you do not need much coding.
  • Through this you can easily create a responsive website. If your website is responsive, then it adjusts itself according to the size of the screen in any platform or device.You can use Bootstrap for free.
  • If you want to change the already added in-built style in Bootstrap, then you can easily do it. You have to overwrite the code of Bootstrap by writing your CSS Code from your CSS Code.

Bootstrap is fast becoming the world’s favorite and useful front-end component library. Using it, you can easily create responsive, mobile-friendly projects on your web.

You have been provided with many important features in Bootstrap. Hope the given information has proved useful to you and all your doubts will be cleared in this article. If you liked this article of ours, then do not forget to share it.

The post How to add, edit and delete rows of an HTML table with Jquery? appeared first on Software Development | Programming Tutorials.



Read More Articles