Dynamically add td and tr onclick HTML JQUERY

Question

I have a table with a row and two TDs

<table id="tbTest">
    <tr>
        <td>
            <input type="text">
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

I also have a button that adds a new row with a td dynamically. If the second time is clicked I want to add a second td. if the third time is clicked I want to add a new tr with one td...etc

jquery on click

var counter = 2;

if ((counter % 2) == 0) {
    row = $('<tr><td><input type="text"/></td></tr>');
}
else {
    //???????????????
}
row.appendTo('#tbTest');
counter++;

I can add a tr and td (first time clicked) but the second time clicked how do I insert a second td in a tr... suggestions?

thanks,

I would just count how many tds are in the last row. If there are already two, add a new row. — Felix Kling
– Felix Kling, Commented Jun 1, 2014 at 23:17

Akinkunle Allen · Accepted Answer · 2014-06-01 23:47:58Z

3

From your question, I guess what you want to achieve is to add a new row with table data when the button is first clicked and every other odd time (third time, fifth time etc) and to add a new table data to the created row when the button is clicked a second time and every other even time (fourth time, sixth time etc)

var counter = 0,
    row;

$('button').click(function() {
  counter++; //increase value of counter

//for every odd time click
if (counter % 2 != 0) {
    row = $('<tr><td><input type="text"></td></tr>'); //create row
    $('#tbTest').append(row);
}
else {
    //create a table data
    var tableData = $('<td><input type="text"></td>');
    row.append(tableData); //append the table data to the last created row
}
});

Here is a working fiddle: http://jsfiddle.net/976PT/

edited Jun 1, 2014 at 23:47

answered Jun 1, 2014 at 23:25

Akinkunle Allen

1,30912 silver badges20 bronze badges

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

2 Comments

Benk Over a year ago

Works. Thank you. I understand "$('#tbTest').append(row);" adds row to a table. confused with: "row.append(tableData);" appends a tableData to a row where row is a variable? how does it know to append to a row?

Akinkunle Allen Over a year ago

The variable 'row' is a reference to the created jQuery object that contains the row. 'row.append(tableData)' just appends a table data to the created row stored at variable 'row'. I hope this helps. Pls, up vote my answer.

user3697679 · Accepted Answer · 2014-06-01 23:23:44Z

1

Something like this would work:

var container = $('#tbTest tr:last');
if(container.find('td').length > 1)
{
    $('#tbTest').append('<tr></tr>');
     container = $('#tbTest tr:last');
}
$(container).append('<td><input type="text"/></td>');

I'm not sure if this code is 100% correct, but basically you need to check if the last tr element contains more than one td, and if it does, create a new one.

answered Jun 1, 2014 at 23:23

user3697679

Comments

Nick · Accepted Answer · 2014-06-01 23:29:15Z

0

$(document).ready(function ($) {
    var i = 0;
    $("button").click(function () {
        if (i % 2 != 0) {
            row = $('<td><input type="text"/></td>');
            row.appendTo('#tbTest tr:last-child');
        } else {
            row = $('<tr><td><input type="text"/></td></tr>');
            row.appendTo('#tbTest');
        }
        i++
    })
})

Here is a fiddle: http://jsfiddle.net/aK73x/5/

edited Jun 1, 2014 at 23:29

answered Jun 1, 2014 at 23:23

Nick

2,9906 gold badges38 silver badges73 bronze badges

Collectives™ on Stack Overflow

Dynamically add td and tr onclick HTML JQUERY

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related