How do I dynamically add columns to a table with JavaScript?

Question

I have a table with three columns and two rows. I have this code which appends all data to just the first column. I know I am appending all the rows but I am not sure how to change it to add new columns instead.

var jdata = [];
$.getJSON(getURL(), function(json) {
    jdata = json.items;
    var menu = [];
    $.each(jdata, function(key, val){
        menu.push("<tr>");
        menu.push("<td id=''"+key+"''>"+jdata[key].item_code+"</td>");
        menu.push("<tr>");

        menu.push("<tr>");
        menu.push("<td id=''"+key+"''>"+jdata[key].dish_id+"</td>");
        menu.push("<tr>");

    });
    $("<tbody/>", {html: menu.join("")}).appendTo("table");

});

this is what the result looks like:

result

Community · Accepted Answer · 2017-05-23 11:54:54Z

1

Like this?

menu.push("<tr>");
menu.push("<td id=''"+key+"''>"+jdata[key].item_code+"</td>");
menu.push("<td id=''"+key+"''>"+ `your data here` +"</td>");
menu.push("<td id=''"+key+"''>"+ `your data here` +"</td>");
menu.push("</tr>");

Also as mentioned by @christophano, you need to close your tr like this, </tr> instead of just this <tr>

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 5, 2017 at 8:59

rishipuri

1,52811 silver badges18 bronze badges

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

2 Comments

christophano Over a year ago

Don't forget to make the last tr a closing tag - </tr>

cajun Over a year ago

Thanks for pointing out the </tr> error. That still didnt fix the issue. It seems i am appending to the table everytime as opposed to appending to the next column. Any idea how i an do that? TIA!

Collectives™ on Stack Overflow

How do I dynamically add columns to a table with JavaScript?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related