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

Introduction

 

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 the 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