javascript - Adding Table Rows on Button Click -

javascript - Adding Table Rows on Button Click -

i want add together table rows user clicks add button. in new row there 3 textboxes. rows gets added id of textboxes should set array list.

for e.g if 2nd row added, textbox ids textbox1_1 textbox2_1 textbox3_1 if 3rd row added, textbox ids textbox1_2 textbox2_2 textbox3_2

because want add together these textboxes values in single string @ end.

fiddle

added later :- indeed @ first time there no rows in table.

try this:

$("#btnadd").click(function(){ var id = $('table tr').size(), i, row = '<tr>'; for(i = 1; <= 3; i++) { row += '<td><input type="text" id="text'+i+'_'+id+'" />'; } row += '</tr>'; $('table').append(row); });

demo alternativly if want build previous rows can this:

$("#btnadd").click(function(){ var id = $('table tr').size(), tr = $('table tr').last().clone(); $(tr).find('td').each(function (index) { $(this).attr('id', 'text'+index+'_'+id); }); $('table').append(tr); });

demo

javascript jquery table