Retrieving dynamically created row from code-behind

Question

Retrieving dynamically created row from code-behind

My ASPX page contains a table with headings. I am dynamically adding rows to the table using JavaScript, but when trying to access these newly added rows on the server side, I can only see the heading row and not the new ones. The table always appears to have only one row, and I am unable to access the dynamically 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;

Despite my efforts, I consistently receive a count value of one. Any help would be greatly appreciated.

c#javascript asp.net

Answer 1

Answer №1

While your JavaScript runs in the browser, your CS code is executed on the server. The server code is processed before the generated HTML page is sent to the web browser.

To address the issue, consider inserting rows into the table using CS code rather than JavaScript. This approach should resolve the problem at hand.

Answer 2

While your JavaScript runs in the browser, your CS code is executed on the server. The server code is processed before the generated HTML page is sent to the web browser.

To address the issue, consider inserting rows into the table using CS code rather than JavaScript. This approach should resolve the problem at hand.

Answer 3

Answer №2

If you're looking for a way to keep track of counts in your table, I recommend using a hidden field like this:

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

When adding new rows to the table with JavaScript, make sure to increment the count accordingly:

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

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

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

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

To calculate the total number of rows on the server side, use this code snippet:

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

Tip: If you need to dynamically remove rows with JavaScript, remember to update the counter accordingly.

Answer 4

If you're looking for a way to keep track of counts in your table, I recommend using a hidden field like this:

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

When adding new rows to the table with JavaScript, make sure to increment the count accordingly:

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

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

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

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

To calculate the total number of rows on the server side, use this code snippet:

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

Tip: If you need to dynamically remove rows with JavaScript, remember to update the counter accordingly.

Retrieving dynamically created row from code-behind

Answer №1

Answer №2

Similar questions

I'm looking for a simple method to create both a dark mode and light mode for an HTML page using Javascript. Can anyone help me out with

Tips for globally overriding MUIv4 class in JSS for nested themes

What causes the content of my container to disappear following a setInterval div swap in Internet Explorer?

When examining the buffer property of each uploaded file, particularly when dealing with multiple files

Converting JSON to CSV using JavaScript

Struggling to make JavaScript read JSON data from an HTML file

Looking for guidance on configuring an email composer in a PhoneGap application

Error: The term 'RequestCompleted' is not recognized by Microsoft JScript

transferring data between PHP frames

What steps can be taken to prompt the layout to transition?

How to efficiently traverse an array in C# by making use of multiple iterations

Configuring environment variables during Jest execution

React counter variable failing to increment

Can you explain the functionality of templates in the Primeng grid for Angular 6?

Create a simple three-sided shape using Three.js

Svelte's feature prevents users from inputting on Mapbox

Unlimited Cycle using Vue Router Global Precautionary Measures

Deployment of multiple versions in Azure Web Sites is a breeze

Is there a way to determine which 'a href' link was selected on the previous webpage?

Unexpected unusual occurrences