How to Add Edit and Delete Data in HTML Table using JavaScript ?

Last Updated : 21 Jun, 2023

In web development, it is often necessary to handle data within an HTML table. JavaScript offers robust capabilities for dynamically incorporating, modifying, and removing data within a table. These functionalities enable the manipulation of table content without the need to refresh the entire page, resulting in seamless and effective user interaction.

HTML Table is used to represent tabular data on a webpage. It consists of rows and columns organized in a grid-like format. Tables are commonly used for displaying data in a structured manner, such as in financial reports, product listings, and schedules. In this article, we will create an example of how to add, edit and delete table rows in Javascript.

Approach: The following approach will be used to create the dynamic Table to add or delete the row, & also edit the data in the Table row:

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          User Data Management 
      </title> 
    <style> 
        body { 
            margin: 4rem; 
        } 
  
        #formContainer { 
            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> 
    <h1 style="color: green;"> 
        Geekforgeeks!! 
    </h1> 
    <h2>User Data Management</h2> 
  
    <div id="formContainer"> 
        <label for="nameInput"> 
            Name: 
        </label> 
        <input type="text" 
               id="nameInput" 
               placeholder="Enter your name"> 
        <label for="emailInput"> 
            Email I'd: 
        </label> 
        <input type="email" 
               id="emailInput" 
               placeholder="Enter your email"> 
        <label for="numberInput"> 
            Mobile Details: 
        </label> 
        <input type="text" 
               id="numberInput" 
               placeholder="Enter your mobile details"> 
        <label for="addressInput"> 
            Address: 
        </label> 
        <textarea id="addressInput" 
                  placeholder="Enter your address"> 
        </textarea> 
        <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>