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
  1. //Default value  
  2. var rows = 1;  
  3. function addRow(tableID, options) {  
  4.    //Get table by tableid  
  5.    var table = document.getElementById(tableID);  
  6.    //Get no of rows in the table  
  7.    var rowCount = table.rows.length;  
  8.    var arr;  
  9.    if (options != "") {  
  10.      arr = options.split("[oP]");  
  11.      if (arr.length > 0)  
  12.         rows = arr.length;  
  13.    }  
  14.              
  15. for (var i = 0; i < rows; i++) {  
  16.  //Create a row in table  
  17.  var row = table.insertRow(rowCount);  
  18.  //Create first column in added row  
  19.  var cell0 = row.insertCell(0);  
  20.  //Get the text box values for maintain state  
  21.  var values  
  22.  if (options != "" && arr.length > i)  
  23.      values = arr[i].split("[vaL]");  
  24.    
  25.  //Create first element  
  26. element1.type = "text";  
  27. element1.setAttribute("id""Test1TextBox" + rowCount);  
  28. element1.setAttribute("name""Test1TextBox");  
  29. element1.setAttribute("MaxLength""120");  
  30. element1.setAttribute("size""44");  
  31. element1.setAttribute("style""width:120px");  
  32. if (options != "" && arr.length > i)  
  33.    element1.setAttribute("value", values[0]);  
  34. //Added first element in column 1  
  35. cell0.appendChild(element1);  
  36.    
  37. //Create the second column in added row  
  38.   
  39. var element2 = (/MSIE (6|7|8)/).test(navigator.userAgent) ? document.createElement('<input name="Test2TextBox">') : document.createElement("input");  
  40. element2.type = "text";  
  41. element2.setAttribute("id""Test2TextBox" + rowCount);  
  42. element2.setAttribute("name""Test2TextBox");  
  43. element2.setAttribute("MaxLength""120");  
  44. element2.setAttribute("size""44");  
  45. element2.setAttribute("style""width:120px");  
  46.    
  47. if (options != "" && arr.length > i)  
  48.      element2.setAttribute("value", values[1]);  
  49.      //Added second element in column 2  
  50.      cell1.appendChild(element2);  
  51.      rowCount++;  
In aspx page
  1. <!—Create table in which we will add row -->  
  2.         <table id="TestTable" cellspacing="0" cellpadding="3" border="1" style="width: 250px;">  
  3.             <tr>  
  4.                 <td>  
  5.                     Name  
  6.                 </td>  
  7.                 <td>  
  8.                     Designation  
  9.                 </td>  
  10.             </tr>  
  11.         </table>  
  12.         <!--Add hyper link button for add row in above table which call the javascript function created above-->  
  13.         <div style="margin-top: 5px;">  
  14.             <asp:HyperLink ID="addRowLink" href="#" runat="server" Visible="true" CssClass="StandaloneLink"  
  15.                 onclick="addRow('TestTable',''); return false;">  
  16. <img src="Image/PlusSign.gif" border=0 style="margin-right:4px;vertical-align: middle;" alt="Add Row" />Add Row</asp:HyperLink>  
  17.         </div>  
  18.         <!-- button for check text box is maintaining values after post back-->  
  19.         <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.
  1. protected void CreateTable(string[] Tes1ItemTextBoxValue, string[] Tes2ItemTextBoxValue)  
  2.    {  
  3.        StringBuilder options = new StringBuilder();  
  4.        if (Tes1ItemTextBoxValue != null)  
  5.        {  
  6.            //For persistence value of text box  
  7.            for (int i = 0; i < Tes1ItemTextBoxValue.Length; i++)  
  8.            {  
  9.                if (i > 0)  
  10.                options.Append("[oP]");  
  11.                string Test1TextBoxValue = Tes1ItemTextBoxValue[i];  
  12.   
  13.                    Test1TextBoxValue = Test1TextBoxValue.Replace("\r\n""\\r\\n");  
  14.                options.Append(Test1TextBoxValue + "[vaL]" + Tes2ItemTextBoxValue[i] + "[vaL]");  
  15.   
  16.            }  
  17.        }  
  18.   
  19.        // Add row dynamically to the table  
  20.        Page.ClientScript.RegisterStartupScript(this.GetType(), "AddRowDynamically""addRow('TestTable','" + options.ToString().Replace("'", @"\'") + "');"true);  
  21.    }  
In the page load event call that function:
  1. protected void Page_Load(object sender, EventArgs e)  
  2.     {  
  3.         if (!IsPostBack)  
  4.         {  
  5.             //Add one row in the table  
  6.             CreateTable(new string[1], new string[1]);  
  7.         }  
  8.         else  
  9.         {  
  10.             //For maintain value of text box  
  11.             string[] Tes1ItemTextBoxValue = Request.Form.GetValues("Test1TextBox");  
  12.             CreateTable(Tes1ItemTextBoxValue, Tes2ItemTextBoxValue);  
  13.         }  
  14.    
  15.     } 
Result
 
Test2.jpg