In our last article, we discussed CRUD operations using JSON in JavaScript and in this article, We will discuss How to edit/delete the selected row from the HTML table using JavaScript with icons.
we are using the Bootstrap table and I have placed two action buttons icons in the table i.e edit and delete. Now onClick edit button, we convert selected row into an editable format so that users can update their information and the delete button should remove the row.
we going to provide an easy way to make them editable inline so let’s make the edit and delete buttons functional.
How to edit selected row from HTML table using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>How to edit/remove selected row from HTML table using JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<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 edit/delete selected row from HTML table using JavaScript</h1>
<br />
<fieldset>
<legend>
Customer List
</legend>
<table class="table">
<thead>
<tr>
<th>CustomerId</th>
<th>CustomerName</th>
<th>CustomerEmail</th>
<th>Address</th>
</tr>
</thead>
<tbody id="tblbody">
<tr id="119447">
<td class="td-data">119447</td>
<td class="td-data">Qa</td>
<td class="td-data">[email protected]</td>
<td class="td-data">USA</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119443">
<td class="td-data">119443</td>
<td class="td-data">Qa</td>
<td class="td-data">[email protected]</td>
<td class="td-data">USA</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119437">
<td class="td-data">119437</td>
<td class="td-data">Qa</td>
<td class="td-data">[email protected]</td>
<td class="td-data">USA</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119428">
<td class="td-data">119428</td>
<td class="td-data">Maduwantha</td>
<td class="td-data">[email protected]</td>
<td class="td-data">CAN</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119422">
<td class="td-data">119422</td>
<td class="td-data">kamii</td>
<td class="td-data">[email protected]</td>
<td class="td-data">usa</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119421">
<td class="td-data">119421</td>
<td class="td-data">kellu</td>
<td class="td-data">[email protected]</td>
<td class="td-data">usa</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119411">
<td class="td-data">119411</td>
<td class="td-data">damna</td>
<td class="td-data">[email protected]</td>
<td class="td-data">usa</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119409">
<td class="td-data">119409</td>
<td class="td-data">csd</td>
<td class="td-data">[email protected]</td>
<td class="td-data">France</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
<tr id="119385">
<td class="td-data">119385</td>
<td class="td-data">asd</td>
<td class="td-data">[email protected]</td>
<td class="td-data">Paris</td>
<td class="td-data">
<button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">edit</button>
<button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">delete</button>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</body>
</html>
<script type="text/javascript">
function showEditRow() {
debugger;
var rowdataId = event.target.parentNode.parentNode.id;
//this gives id of tr whose button was clicked
/*returns array of all elements with "td-data"" class within the row with given id*/
var data = document.getElementById(rowdataId).querySelectorAll(".td-data");
var ID = data[0].innerHTML;
var name = data[1].innerHTML;
var email = data[2].innerHTML;
var address = data[3].innerHTML;
data[0].innerHTML = '<input name="txtupdate_ID" disabled id="txtupdate_ID" value="' + ID + '"/>';
data[1].innerHTML = '<input name="txtupdate_Name" id="txtupdate_Name" value="' + name + '"/>';
data[2].innerHTML = '<input name="txtupdate_email" id="txtupdate_email" value="' + email + '"/>';
data[3].innerHTML = '<input name="txtupdate_Address" id="txtupdate_Address" value="' + address + '"/>';
data[4].innerHTML =
"<button class='btn btn-primary btn-xs btn-updateCustomer' onclick='updateData()'>" +
"Update</button>"
+ "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancelUpdate()'>Cancel</button>"
+ "<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow()'>"
+ "Delete</button>"
}
function cancelUpdate() {
var rowdataId = event.target.parentNode.parentNode.id;
var dataRow = document.getElementById(rowdataId); //this gives tr of whose button was clicked
var trRow = dataRow.querySelectorAll(".td-data");
var Name = trRow[1].querySelectorAll("#txtupdate_Name")[0].value;
var email = trRow[2].querySelectorAll("#txtupdate_email")[0].value;
var address = trRow[3].querySelectorAll("#txtupdate_Address")[0].value;
trRow[0].innerHTML = rowdataId;
trRow[1].innerHTML = Name;
trRow[2].innerHTML = email;
trRow[3].innerHTML = address;
var actionbtn = "<button class='btn btn-info btn-xs' onclick='showEditRow()'>Edit</button>" +
"<button class='btn btn-danger btn-xs' onclick='deleteRow()'>Delete</button>"
trRow[4].innerHTML = actionbtn;
}
function deleteRow() {
var rowdataId = event.target.parentNode.parentNode.id;
document.getElementById(rowdataId).remove();
}
function updateData() {
var rowdataId = event.target.parentNode.parentNode.id;
var dataRow = document.getElementById(rowdataId); //this gives tr of whose button was clicked
var datatr = dataRow.querySelectorAll(".td-data");
var Name = datatr[1].querySelector("#txtupdate_Name").value;
var email = datatr[2].querySelector("#txtupdate_email").value;
var address = datatr[3].querySelector("#txtupdate_Address").value;
datatr[0].innerHTML = rowdataId;
datatr[1].innerHTML = Name;
datatr[2].innerHTML = email;
datatr[3].innerHTML = address;
var actionbtn = "<button class='btn btn-info btn-xs' onclick='showEditRow()'>edit</button>" +
"<button class='btn btn-danger btn-xs' onclick='deleteRow()'>delete</button>"
datatr[4].innerHTML = actionbtn;
}
</script>If you have any queries or doubts, please comment.
In the page we have a html table to display customer data.Each table row represents a customer, displaying their CustomerId, CustomerName, CustomerEmail, and Address.Edit and delete buttons are provided for each customer row.
JavaScript Functions:
showEditRow(): This function is triggered when the edit button for a specific customer row is clicked. It dynamically replaces the row's data with input fields pre-filled with the existing customer information, allowing the user to edit.
cancelUpdate(): This function cancels the edit operation for a specific customer row and restores the original data.
deleteRow(): This function removes a customer row from the table when the delete button is clicked.
updateData(): This function updates the customer's information in the table based on the edited values.
Event listeners are attached to the edit and delete buttons within each row, invoking the corresponding JavaScript functions (showEditRow() and deleteRow()).When editing a row, input fields replace the existing data in the table cells, allowing users to modify the customer information.Upon cancellation or updating, the input fields are replaced with the original data.
The edit button enables users to modify the customer information.The delete button allows users to remove a customer row from the table.
In this page used for managing customer data, enabling users to edit and delete specific rows directly within the HTML table using JavaScript functions.
Read more article
- [Simple Way]-JavaScript Edit table row Using Popup
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- [Simple Trick]-Hide Points in ChartJS Line Graph
- [Simple Trick]-How to Hide Some Points in ChartJS
- How to leave just points without lines in ChartJS
Note*
The first and most important thing is the target audience, that is, the visitors to your website, when you come to know about the audience of your website, then your work becomes very easy.
With this, you get to understand what type of content your audience is like, now according to this you will be able to design your site further.
For example, if you are making a website for an automobile, then it is obvious that in the audience group there will be only those people who like bikes, cars, etc. What kind of information do you want from the site, now you will put only those things on your site which are useful for the person who likes the car.
The structure or structure of the website is called its layout, while designing the layout, keeping in mind the height-width, position, etc of different sections of the website like header, sidebar, content, footer, etc., the structure is designed in such away. That we are able to present the information of our site to the user in the right way.
Whenever we design our website, we also have to take care of the color combination, you must have seen that a maximum of 3 or 4 colors are used in most of the websites so that the site looks more professional.
The color of the images, fonts, backgrounds, etc. to be used is selected according to the pre-decided color combination and the same combination is used in all the pages.
Nowadays it has become very easy to create a website, there are many such tools on the internet, with the help of which you can easily create your website without any programming.
But if you want to become a professional web designer, you want to design any kind of website, and you can understand not only the design but also all the functionality inside it, then for this, you have some programming skills. It is necessary to have
Read Similar Articles
- How To Pass Parameters in AJAX POST? | JQuery Ajax Post Json Example
- [Example]-Html table javascript add column dynamically with an example
- [Simple Way]-CRUD Operations Using JSON In JavaScript
- [Solved]-How to get days,minute, hours between two dates in JavaScript?
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Solved]-Difference between two dates in minutes Javascript