在后面的代码中访问动态生成的表行

Question

I have table in with headings in aspx page. I have add the rows to table dynamically using javascript. I need to access the newly added table rows in server side. I only able to access heading row, it alwasys show table have only one rows, not able to access newly added rows.

ASPX page

<table runat="server" id="tblNew" clientidmode="Static">
                                        <tr>
                                            <th>
                                                Column1
                                            </th>
                                            <th>
                                                Column2
                                            </th>
                                        </tr>
                                    </table>

Javascript function for adding rows.

    var table = document.getElementById("SelectedItems");
    var newrow = table.insertRow(0);
    var newcel0 = newrow.insertCell(0);
    var newcel1 = newrow.insertCell(1);

CS TO access table rows

    int rowCount=tblNew.Rows.Count;

I always got count value as one. Help appreciated.

Answer 1

Your JavaScript is being executed in your browser. Your CS code is being executed in your server. Your server code is being executed BEFORE the resulting html page is transfered to your webbrowser.

Add rows into the table in CS code instead of JavaScript code. This will solve the problem.

Answer 2

I would suggest to use hidden field to manage count :

<input type="hidden" value="0" runat="server" id="hiddenRowCount"/>

Now whenever you add new row to the table using javascript, increment the counter as given below :

var table = document.getElementById("<%=tblNew.ClientID%>");
var newrow = table.insertRow(0);
newrow.insertCell(0);
newrow.insertCell(1);

// get current value of the hidden field
var rowCount = document.getElementById('<%=hiddenRowCount.ClientID%>').value;

if (rowCount != '') {
    rowCount = parseInt(rowCount) + 1;
} else {
    rowCount = 1;
}

document.getElementById('<%=hiddenRowCount.ClientID%>').value = rowCount;

Now you can get total number of rows at code behind asa mentioned below :

int totalRows = this.tblNew.Rows.Count + Convert.ToInt32(this.hiddenRowCount.Value);

Note: If you have to dynamically remove raw using javascript then you have to manage counter for that as well.