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

Ish Bandhu
Feb 18, 2013
49.1k
0
2
Article

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

<tr>

<td>

Name

</td>

<td>

Designation

</td>

</tr>

</table>

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

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

</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);
        }

    }