JavaScript - How to Add, Edit and Delete Data in HTML Table?
Last Updated :
26 Nov, 2024
Improve
To add edit and delete features in an HTML table with JavaScript, create buttons for each action. Use JavaScript functions to add new rows, edit existing data, and remove rows as needed.
Approach to Add Edit and Delete Data
- The addData() method obtains the data from the input fields and creates a fresh row in the table containing the supplied information.
- The "Edit" button triggers the editData() function, which replaces name and email table cells with pre-filled input fields. The button's text changes to "Save," and it calls the saveData() function when clicked.
- The saveData() function saves the edited data by retrieving input values, updating table cells, resetting the button, and reinvoking editData().
- When the "Delete" button is clicked, the deleteData() function eliminates the associated row from the table.
Example: In this example, we will see how to add edit, and delete data in an HTML table using JavaScript. First, we take input from the user then whatever data is entered by the user it will show on the table.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1,
h2 {
text-align: center;
}
#formContainer {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
}
input,
textarea {
width: 300px;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin: 10px;
padding: 8px 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
table {
border-collapse: collapse;
margin-bottom: 20px;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: #fff;
}
</style>
</head>
<body>
<h2>User Data Management</h2>
<div id="formContainer">
<label for="nameInput">
Name:
</label>
<input type="text" id="nameInput" placeholder="Enter Name...">
<label for="emailInput">
Email ID:
</label>
<input type="email" id="emailInput" placeholder="Enter Email...">
<label for="numberInput">
Mobile Details:
</label>
<input type="text" id="numberInput" placeholder="Enter Mobile Details...">
<label for="addressInput">
Address:
</label>
<textarea id="addressInput" placeholder="Enter Address..."></textarea>
<br>
<button onclick="addData()">Add</button>
</div>
<table id="outputTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile Details</th>
<th>Address</th>
<th>Action</th>
</tr>
</table>
<script>
function addData() {
// Get input values
let name = document.getElementById("nameInput").value;
let email = document.getElementById("emailInput").value;
let mobile = document.getElementById("numberInput").value;
let address = document.getElementById("addressInput").value;
// Get the table and insert a new row at the end
let table = document.getElementById("outputTable");
let newRow = table.insertRow(table.rows.length);
// Insert data into cells of the new row
newRow.insertCell(0).innerHTML = name;
newRow.insertCell(1).innerHTML = email;
newRow.insertCell(2).innerHTML = mobile;
newRow.insertCell(3).innerHTML = address;
newRow.insertCell(4).innerHTML =
'<button onclick="editData(this)">Edit</button>' +
'<button onclick="deleteData(this)">Delete</button>';
// Clear input fields
clearInputs();
}
function editData(button) {
// Get the parent row of the clicked button
let row = button.parentNode.parentNode;
// Get the cells within the row
let nameCell = row.cells[0];
let emailCell = row.cells[1];
let mobileCell = row.cells[2];
let addressCell = row.cells[3];
// Prompt the user to enter updated values
let nameInput =
prompt("Enter the updated name:",
nameCell.innerHTML);
let emailInput =
prompt("Enter the updated email:",
emailCell.innerHTML);
let numberInput =
prompt("Enter the updated mobile details:",
mobileCell.innerHTML
);
let addressInput =
prompt("Enter the updated address:",
addressCell.innerHTML
);
// Update the cell contents with the new values
nameCell.innerHTML = nameInput;
emailCell.innerHTML = emailInput;
mobileCell.innerHTML = numberInput;
addressCell.innerHTML = addressInput;
}
function deleteData(button) {
// Get the parent row of the clicked button
let row = button.parentNode.parentNode;
// Remove the row from the table
row.parentNode.removeChild(row);
}
function clearInputs() {
// Clear input fields
document.getElementById("nameInput").value = "";
document.getElementById("emailInput").value = "";
document.getElementById("numberInput").value = "";
document.getElementById("addressInput").value = "";
}
</script>
</body>
</html>
<html lang="en"><head> <style> h1, h2 { text-align: center; } #formContainer { text-align: center; margin-bottom: 20px; } label { display: block; margin-top: 10px; } input, textarea { width: 300px; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; } button { margin: 10px; padding: 8px 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } table { border-collapse: collapse; margin-bottom: 20px; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: #fff; } </style></head><body> <h2>User Data Management</h2> <div id="formContainer"> <label for="nameInput"> Name: </label> <input type="text" id="nameInput" placeholder="Enter Name..."> <label for="emailInput"> Email ID: </label> <input type="email" id="emailInput" placeholder="Enter Email..."> <label for="numberInput"> Mobile Details: </label> <input type="text" id="numberInput" placeholder="Enter Mobile Details..."> <label for="addressInput"> Address: </label> <textarea id="addressInput" placeholder="Enter Address..."></textarea> <br> <button onclick="addData()">Add</button> </div> <table id="outputTable"> <tr> <th>Name</th> <th>Email</th> <th>Mobile Details</th> <th>Address</th> <th>Action</th> </tr> </table> <script> function addData() { // Get input values let name = document.getElementById("nameInput").value; let email = document.getElementById("emailInput").value; let mobile = document.getElementById("numberInput").value; let address = document.getElementById("addressInput").value; // Get the table and insert a new row at the end let table = document.getElementById("outputTable"); let newRow = table.insertRow(table.rows.length); // Insert data into cells of the new row newRow.insertCell(0).innerHTML = name; newRow.insertCell(1).innerHTML = email; newRow.insertCell(2).innerHTML = mobile; newRow.insertCell(3).innerHTML = address; newRow.insertCell(4).innerHTML = '<button onclick="editData(this)">Edit</button>' + '<button onclick="deleteData(this)">Delete</button>'; // Clear input fields clearInputs(); } function editData(button) { // Get the parent row of the clicked button let row = button.parentNode.parentNode; // Get the cells within the row let nameCell = row.cells[0]; let emailCell = row.cells[1]; let mobileCell = row.cells[2]; let addressCell = row.cells[3]; // Prompt the user to enter updated values let nameInput = prompt("Enter the updated name:", nameCell.innerHTML); let emailInput = prompt("Enter the updated email:", emailCell.innerHTML); let numberInput = prompt("Enter the updated mobile details:", mobileCell.innerHTML ); let addressInput = prompt("Enter the updated address:", addressCell.innerHTML ); // Update the cell contents with the new values nameCell.innerHTML = nameInput; emailCell.innerHTML = emailInput; mobileCell.innerHTML = numberInput; addressCell.innerHTML = addressInput; } function deleteData(button) { // Get the parent row of the clicked button let row = button.parentNode.parentNode; // Remove the row from the table row.parentNode.removeChild(row); } function clearInputs() { // Clear input fields document.getElementById("nameInput").value = ""; document.getElementById("emailInput").value = ""; document.getElementById("numberInput").value = ""; document.getElementById("addressInput").value = ""; } </script></body></html>Output
