JavaScript - How to Add, Edit and Delete Data in HTML Table? Last Updated : 26 Nov, 2024 Comments Improve Suggest changes Like Article Like Report 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 DataThe 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. HTML <!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> Output Comment More infoAdvertise with us Next Article JavaScript - How to Add, Edit and Delete Data in HTML Table? saurabhkumarsharma05 Follow Improve Article Tags : HTML JavaScript-Questions Similar Reads HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript 11 min read JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as 15+ min read HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML 14 min read Top 10 Projects For Beginners To Practice HTML and CSS Skills Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSSâthe foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis 8 min read HTML Introduction HTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam 6 min read HTML Tags - A to Z List HTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag and a closing tag. The cl 15+ min read HTML DOCTYPE Declaration HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag.Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly. It is not an HT 4 min read 30+ Web Development Projects with Source Code [2025] Web development is one of the most in-demand career paths in the IT industry, experiencing consistent growth of around 20â25% annually. Whether you're a student starting out or an experienced professional looking to switch or advance your career, it's essential to go beyond theory and demonstrate yo 4 min read Frontend Developer Interview Questions and Answers Frontend development is an important part of web applications, and it is used to build dynamic and user-friendly web applications with an interactive user interface (UI). Many companies are hiring skilled Frontend developers with expertise in HTML, CSS, JavaScript, and modern frameworks and librarie 15+ min read HTML Forms HTML forms, defined using the <form> Tags are essential for collecting user input on web pages. They incorporate a variety of interactive controls such as text fields, numeric inputs, email fields, password fields, checkboxes, radio buttons, and submit buttons. Over 85% of websites rely on for 5 min read Like