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