How to add or remove rows dynamically to HTML Table in Java Script

Introduction:

In this article i will explain how to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script.

Description:

In previous articles i explained How to replace string in SQL Server, How to replace string in C#, How to replace string in Java Script, How many ways we can replace the string in Java Script, How to work with TextBox in Java Script and How to create a HTML Table dynamically in Java Script. Now i will explain how to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script.

This article includes the following:

Create/Insert rows dynamically to HTML Table
Remove/Delete rows from HTML Table

Before reading this article please read How to Create HTML Table dynamically in Java Script.

Now create a table as shown below.

    <div>
        <table border="0" cellpadding="0" cellspacing="0" class="article">
            <tr>
                <th>
                    Col1
                </th>
                <th>
                    Col2
                </th>
                <th>
                    Col3
                </th>
                <th style="width: 160px;">
                    Add
                </th>
            </tr>
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
                <td>
                    <input type="button" value="Add Row" onclick="AddRow(this)" />
                </td>
            </tr>
        </table>
    </div>

Write a script for AddRow() function as shown below.

        function AddRow(sender) {
            // Get current row index.
            var rowIndex = sender.parentNode.parentNode.rowIndex + 1;
            // Get current table.
            var table = sender.parentNode.parentNode.parentNode.parentNode;
            // Create a new row.
            var row = table.insertRow(rowIndex);
            // Create Col1.
            var col1 = row.insertCell(0);
            col1.innerHTML = 'Col1';
            // Create Col2.
            var col2 = row.insertCell(1);
            col2.innerHTML = 'Col2';
            // Create Col3.
            var col3 = row.insertCell(2);
            col3.innerHTML = 'Col3';
            // Create Col4.
            var col4 = row.insertCell(3);
            col4.innerHTML = '<input type="button" value="Add Row" onclick="AddRow(this)" /><input type="button" value="Delete Row" onclick="DeleteRow(this)" />';
        }

When a new row is created then two buttons will be added to it. One is Add Row button and Delete Row button.

Now write a script for DeleteRow() function as shown below.

        function DeleteRow(sender) {
            var table = sender.parentNode.parentNode.parentNode.parentNode;
            table.deleteRow(sender.parentNode.parentNode.rowIndex);
        }

Full Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptAddRowsDynamically.aspx.cs"
    Inherits="JavaScriptAddRowsDynamically" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Add Rows Dynamically in Java script</title>
    <style type="text/css">
        .article { width: 600px; border: 1px solid #DFDFDF; background-color: #F9F9F9; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; color: #333; margin-top: 3px; }
        .article td, .article th { border-top-color: white; border-bottom: 1px solid #DFDFDF; color: #555; }
        .article th { text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px; font-family: Arial, "Bitstream Vera Sans" ,Helvetica,Verdana,sans-serif; font-weight: bold; padding: 7px 7px 8px; text-align: left; line-height: 1.3em; font-size: 12px; background: #E3F2D4; border-right: 1px solid #DFDFDF; }
        .article td { font-size: 12px; padding: 7px 7px 8px; vertical-align: top; border-right: 1px solid #DFDFDF; }
    </style>
    <script type="text/javascript">
        function AddRow(sender) {
            // Get current row index.
            var rowIndex = sender.parentNode.parentNode.rowIndex + 1;
            // Get current table.
            var table = sender.parentNode.parentNode.parentNode.parentNode;
            // Create a new row.
            var row = table.insertRow(rowIndex);
            // Create Col1.
            var col1 = row.insertCell(0);
            col1.innerHTML = 'Col1';
            // Create Col2.
            var col2 = row.insertCell(1);
            col2.innerHTML = 'Col2';
            // Create Col3.
            var col3 = row.insertCell(2);
            col3.innerHTML = 'Col3';
            // Create Col4.
            var col4 = row.insertCell(3);
            col4.innerHTML = '<input type="button" value="Add Row" onclick="AddRow(this)" /><input type="button" value="Delete Row" onclick="DeleteRow(this)" />';
        }
        function DeleteRow(sender) {
            var table = sender.parentNode.parentNode.parentNode.parentNode;
            table.deleteRow(sender.parentNode.parentNode.rowIndex);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0" class="article">
            <tr>
                <th>
                    Col1
                </th>
                <th>
                    Col2
                </th>
                <th>
                    Col3
                </th>
                <th style="width: 160px;">
                    Add
                </th>
            </tr>
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
                <td>
                    <input type="button" value="Add Row" onclick="AddRow(this)" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Output: