How to get data from table which add row at client side?

Question

I have a table includes 2 columns. And have a button "Add Row" to allow the user to add new row with 2 text boxes dynamically (by using jJvascript in order to increase the performance without post back at server).

I wish to retrieve all the values keyed by the user and save to database.

My problem is, I couldn't retrieve the table's values at server side (in .aspx.cs file) because my table is not runat="server" , if my table runat="server" , I couldn't add row at client side.

Any idea to solve this or have another alternative way to do so?

Below is my code for "Add Row":

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        if (rowCount > 10) {
            alert("Only 10 rows allow");
            return false;
        }  

        var cell1 = row.insertCell(0);
        cell1.innerHTML = rowCount;

        var cell2 = row.insertCell(1);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.name = "txtbox[]";
        element1.style = "width:345px;"
        cell2.appendChild(element1);

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.style = "width:345px;"
        cell3.appendChild(element2);
    }

and this is the code of the table

<table id="tblAddNode" width="750px" border="1">
            <tr>
                <th width="10px">No.</th>
                <th width="350px">Description</th>
                <th width="350px"> Keyword </th>
             </tr>
             <tr>
                <td width="10px">1</td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
                <td width="350px"> <input type="text" style="width:345px;"/> </td>
             </tr>
        </table>

Edited Add Row Button

input type="button" value="Add Row" onclientclick="addRow('tblAddNode')"

Submit Button

<asp:Button ID="EnterRootNodeButton" runat="server" Text="OK" OnClick="EnterRootNode_Click"/>

Answer 1

I am not sure why you think you cannot manipulate the information on the client side if you mark that as runat="server", do you mean the Id is changed after that?

you can mark the id as static by adding ClientIDMode="Static" or in your javascript, instead of referring to Id, you refer to the ClientId

Also, there are multiple ways of doing that and it depends on how your solution is designed and the time you want to spend on the issue.

You can issue an ajax's call with the user input information and then post that to an API (you need to develop that). You will be save all the information added by the user.

You can also have another API to expose all the information and that enables you to reload the information (if needed in the future).

You will have better UI experience in doing this, but of course it needs more time if you are not familiar with the Ajax and webservice deign.