Add Delete Table Rows Dynamically Using Javascript

Adding and deleting table rows dynamically using JavaScript is a handy skill to have when working on web development projects. This functionality can give your web applications a more interactive and user-friendly touch. Whether you are building a data-driven web application or simply enhancing the user experience on a website, knowing how to manipulate table rows dynamically can be a game-changer. In this guide, we will walk you through the process of adding and deleting table rows dynamically using JavaScript.

To begin, let's start with adding new rows to a table dynamically. To achieve this, you will need an HTML table in your document with an empty body. You can then create a button that, when clicked, triggers the addition of a new row to the table. Here's a simple example to get you started:

<title>Add and Delete Table Rows Dynamically</title>


    <table id="myTable">
        <tbody></tbody>
    </table>
    <button>Add Row</button>

    
        function addRow() {
            var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
            var newRow = table.insertRow(table.rows.length);
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            cell1.innerHTML = "New Cell 1";
            cell2.innerHTML = "New Cell 2";
        }

In the above example, we have a simple HTML structure with a table body that starts empty. The `addRow` function is called when the button is clicked. It gets a reference to the table body element and inserts a new row with two cells containing sample content.

Now, let's move on to deleting table rows dynamically. When a row is no longer needed, you may want to give your users the ability to remove it with the click of a button. Here's how you can implement row deletion functionality:

function deleteRow(row) {
    var rowIndex = row.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(rowIndex);
}

You can call the `deleteRow` function passing the row element that you want to delete as a parameter. The function then finds the index of the row and removes it from the table.

In conclusion, by mastering the art of adding and deleting table rows dynamically using JavaScript, you can significantly enhance the interactivity of your web applications. This feature is particularly useful in scenarios where users need to input multiple sets of data or when you want to give them control over managing content. Experiment with these concepts, customize them to suit your specific needs, and watch your web projects come to life with dynamic table manipulation. Happy coding!