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. }
  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]");
  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);
  37. //Create the second column in added row
  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");
  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++;
  52. }
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];
  13. Test1TextBoxValue = Test1TextBoxValue.Replace("\r\n", "\\r\\n");
  14. options.Append(Test1TextBoxValue + "[vaL]" + Tes2ItemTextBoxValue[i] + "[vaL]");
  16. }
  17. }
  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. }
  15. }
Result
Test2.jpg