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 an "Add Customer" button. Upon clicking the "Add Customer" button, rows are added to the HTML table. Our form includes fields for CustomerID, CustomerName, ContactName, Address, and PostalCode.
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>
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>
JavaScript code handles the insertion, editing, and deletion of rows within an HTML table using jQuery.
Add Customer Button Event Listener:
When the "Add Customer" button is clicked, this function is triggered. It prevents the default form submission behavior, retrieves values from input fields for CustomerID, CustomerName, ContactName, Address, and PostalCode, constructs a new table row (<tr>), and appends it to the table body (#tblbody). After appending, it clears the input fields.
Edit Customer Button Event Listener:
When the "Edit" button within a row is clicked, this function is invoked. It retrieves the data attributes of the selected row to pre-fill the input fields for editing. Then, it replaces the table data cells (<td>) with input fields containing the current values. Additionally, it provides buttons for updating and canceling the update.
Cancel Update Button Event Listener:
This function cancels the editing process initiated by the "Edit" button. It restores the original values of the customer details and provides buttons for editing and deleting the customer.
Update Customer Button Event Listener:
When the "Update" button within a row is clicked after editing customer details, this function is triggered. It retrieves the updated values from the input fields, replaces the table data with these new values, updates the data attributes of the row, and restores the edit and delete buttons.
Delete Customer Button Event Listener:
When the "Delete" button within a row is clicked, this function is called. It removes the entire row from the table.
Overall, this script allows functionality for managing customer data in an HTML table, allowing users to add, edit, and delete customer records dynamically.
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.
Read Similar Articles
- How To Get Video Stream From An IP Camera Using Opencv In Python?
- Solve missing Java EE Server Libraries Error in Netbeans
- "commanderror: you appear not to have the 'mysql' program installed or on your path."
- Puppeteer not waiting for timeout getting Error: Navigation Timeout Exceeded: 30000ms exceeded
