Adding Table Rows on Button Click

Question

I want to add table rows as the user clicks the Add button. In a new row there are 3 textboxes. As the rows gets added id of textboxes should be set like array list.

For e.g
if it is 2nd row added, the textbox ids will be textbox1_1 textbox2_1 textbox3_1
if it is 3rd row added, the textbox ids will be textbox1_2 textbox2_2 textbox3_2

Because I want to Add all these textboxes values in a single string at the end.

FIDDLE

Added later :- Indeed at the first time there are no rows in the table.

Add your code, here in SO with your question not at fiddle.

Satpal
– Satpal

2014-10-13 10:23:02 +00:00
Commented Oct 13, 2014 at 10:23 — Satpal
– Satpal, Commented Oct 13, 2014 at 10:23

Adrian Forsius · Accepted Answer · 2014-10-13 12:48:50Z

2

try this:

$("#btnAdd").click(function(){
    var id = $('table tr').size(),
    i,
    row = '<tr>';

    for(i = 1; i <= 3; i++) {
       row +=  '<td><input type="text" id="text'+i+'_'+id+'" />';
    }   
    row += '</tr>';

    $('table').append(row);
});

DEMO Alternativly if you want to build from previous rows you can do 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

edited Oct 13, 2014 at 12:48

answered Oct 13, 2014 at 10:25

Adrian Forsius

1,4562 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anup Over a year ago

Thanks for the answer..But at the first time i have only empty table...After clicking Add one new row gets added.

Bhushan Kawadkar · Accepted Answer · 2014-10-13 10:24:56Z

1

Try this : you can add row by cloning first row and updating each input's id by iterating them.

//get the count of available row in table
var count = $('#dynamicTable tr').length;

$("#btnAdd").click(function(){
    //clone the first row in table
    var $tr = $('#dynamicTable tr:first').clone();
    //iterate each input to change its id
    $tr.find('input').each(function(){
        var id = $(this).attr('id');
        id = id.substring(0,id.length-1);
        $(this).attr('id',id+count);
    });

   // update count
    count++;
   //add row to the table
    $('#dynamicTable').append($tr);
});

JSFiddle link

answered Oct 13, 2014 at 10:24

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

2 Comments

Anup Over a year ago

What changes to make if table is empty at first?

Bhushan Kawadkar Over a year ago

for empty table, you have to follow the first solution provided by @AndrianForsius.

Fabio · Accepted Answer · 2014-10-13 10:35:24Z

0

Try thus

$("#btnAdd").click(function(){
    var rowCount = $("table tr").length;
    var firstRow = $("table tr:first").clone();
    firstRow.find("input").each(function(){
        this.id=this.id.replace("_0","_"+rowCount);
    });
    $("table").append(firstRow);
});

DEMO

answered Oct 13, 2014 at 10:35

Fabio

1,9802 gold badges15 silver badges19 bronze badges

Comments

Mayank · Accepted Answer · 2014-10-13 11:33:53Z

0

write less do more with jquery. use chaining as below

$("#btnAdd").click(function(){
    $('table')
    .find("tr:first") // traverse the first tr
    .clone() // clone the row
    .appendTo('table') // append the the table tag
    .end() // reset to default selector
    .find('input').each(function(i,x){
      $(this).prop('id',this.id.split('_')[0]+'_'+(+$('table tr').length-1)); // assign the id to the added new row
    });
});

EDIT done with FIDDLE too Hope it helps....

answered Oct 13, 2014 at 11:33

Mayank

1,3925 gold badges25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Adding Table Rows on Button Click

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related