Sunday, 29 September 2013

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

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

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 javascript
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"/>

No comments:

Post a Comment