How to Add Row To a Table With HTML Textbox Using JavaScript and Maintain Textbox Value After Post Back

In this article you will see how to add a row to a table with HTML TextBox using JavaScript and maintain the TextBox value after post-back.

Create a JavaScript function to add a row in a table:

//Default value
var rows = 1;
function addRow(tableID, options) {
   //Get table by tableid
   var table = document.getElementById(tableID);
   //Get no of rows in the table
   var rowCount = table.rows.length;
   var arr;
   if (options != "") {
     arr = options.split("[oP]");
     if (arr.length > 0)
        rows = arr.length;
   }
           
for (var i = 0; i < rows; i++) {
 //Create a row in table
 var row = table.insertRow(rowCount);
 //Create first column in added row
 var cell0 = row.insertCell(0);
 //Get the text box values for maintain state
 var values
 if (options != "" && arr.length > i)
     values = arr[i].split("[vaL]");
 
 //Create first element
element1.type = "text";
element1.setAttribute("id", "Test1TextBox" + rowCount);
element1.setAttribute("name", "Test1TextBox");
element1.setAttribute("MaxLength", "120");
element1.setAttribute("size", "44");
element1.setAttribute("style", "width:120px");
if (options != "" && arr.length > i)
   element1.setAttribute("value", values[0]);
//Added first element in column 1
cell0.appendChild(element1);
 
//Create second column in added row

var element2 = (/MSIE (6|7|8)/).test(navigator.userAgent) ? document.createElement('<input name="Test2TextBox">') : document.createElement("input");
element2.type = "text";
element2.setAttribute("id", "Test2TextBox" + rowCount);
element2.setAttribute("name", "Test2TextBox");
element2.setAttribute("MaxLength", "120");
element2.setAttribute("size", "44");
element2.setAttribute("style", "width:120px");
 
if (options != "" && arr.length > i)
     element2.setAttribute("value", values[1]);
     //Added second element in column 2
     cell1.appendChild(element2);
     rowCount++;
}

In aspx page:

<!—Create table in which we will add row -->

        <table id="TestTable" cellspacing="0" cellpadding="3" border="1" style="width: 250px;">

            <tr>

                <td>

                    Name

                </td>

                <td>

                    Designation

                </td>

            </tr>

        </table>

        <!--Add hyper link button for add row in above table which call the javascript function created above-->

        <div style="margin-top: 5px;">

            <asp:HyperLink ID="addRowLink" href="#" runat="server" Visible="true" CssClass="StandaloneLink"

                onclick="addRow('TestTable',''); return false;">

<img src="Image/PlusSign.gif" border=0 style="margin-right:4px;vertical-align: middle;" alt="Add Row" />Add Row</asp:HyperLink>

        </div>

        <!-- button for check text box is maintaining values after post back-->

        <asp:Button ID="btn1" runat="server" Text="Post Back" />

In aspx.cs page:

Create a function. In the following function we are passing two parameters that are the values of textboxes to be maintained after post-back.

    protected void CreateTable(string[] Tes1ItemTextBoxValue, string[] Tes2ItemTextBoxValue)
    {
        StringBuilder options = new StringBuilder();
        if (Tes1ItemTextBoxValue != null)
        {
            //For persistence value of text box
            for (int i = 0; i < Tes1ItemTextBoxValue.Length; i++)
            {
                if (i > 0)
                options.Append("[oP]");
                string Test1TextBoxValue = Tes1ItemTextBoxValue[i];

                    Test1TextBoxValue = Test1TextBoxValue.Replace("\r\n", "\\r\\n");
                options.Append(Test1TextBoxValue + "[vaL]" + Tes2ItemTextBoxValue[i] + "[vaL]");
 
            }
        }
 
        // Add row dynamically to the table
        Page.ClientScript.RegisterStartupScript(this.GetType(), "AddRowDynamically", "addRow('TestTable','" + options.ToString().Replace("'", @"\'") + "');", true);
    }

 In the page load event call that function:

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Add one row in the table
            CreateTable(new string[1], new string[1]);
        }
        else
        {
            //For maintain value of text box
            string[] Tes1ItemTextBoxValue = Request.Form.GetValues("Test1TextBox");
            CreateTable(Tes1ItemTextBoxValue, Tes2ItemTextBoxValue);
        }
 
    }

Result: