Question

I have a table with two cloumns PartNumber and Quantity as column headers. Each row is a editable text box with a specific ID that is used for sending data over network. Table structure is as follows

<tr>
<th>Part Number</th>
<th>Quantity</th>
</tr>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="number" id="q1"></td>
</tr>
<tr>
<td><input type="text" id="t2"></td>
<td><input type="number" id="q2"></td>
</tr>
--
--
--
<tr>
<td><input type="text" id="t5"></td>
<td><input type="number" id="q5"></td>
</tr>

On click of button i have to send data to webservice for further processing.

My new task is to dynamically add rows on click of a addrow button . Adding rows with textboxes is not an issue.. the issue comes with assigning ID’s to every field. ie.. The next row should have the ID’s as ‘t6’ and ‘q6’ how can i do this

Answer 1

You just need to append the row number to the id attribute of each field.

Heres the process you’ll need to follow in rough code:

var rowNumber = $('table tr').length + 1;
$('#newRow input').attr('id', 't' + rowNumber);
$('#newRow').appendTo('table');