I am dynamically adding new rows to a table named "newDataTable" using the JavaScript function below:
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var table = document.getElementById('newDataTable');
var lastRow = table.rows.length;
var newRow = table.insertRow(lastRow);
//add 6 cells (<td>) to the new row and set the innerHTML to contain text boxes
var newCell = newRow.insertCell(0);
newCell.innerHTML = "<label> City: </label>";
newCell = newRow.insertCell(1);
newCell.innerHTML = "<input type='text' name='tb_city'/>";
newCell = newRow.insertCell(2);
newCell.innerHTML = "<label> State: </label>";
newCell = newRow.insertCell(3);
newCell.innerHTML = "<input type='text' name='tb_state'/>";
newCell = newRow.insertCell(4);
newCell.innerHTML = "<input title='Add Row' name='addButton' type='button' value='Add' onclick='addRow()' />";
newCell = newRow.insertCell(5);
newCell.innerHTML = "<input title='Remove Row' name='deleteButton' type='button' value='Delete' onclick='removeRow(this)' />";
}
After implementing this, my page appears like this:
Now, I am looking for a way to extract data from the textboxes and store them in a csv/txt file when the user clicks the "Submit" button (using C#). Is there a workaround for assigning IDs to each textbox considering how rows are added through addRow()?
Your guidance on how to save the data without changing the logic of addRow() will be highly appreciated. Thank you!!