Create table using jQuery and .append

Question

I need to create table that looks like this using append jQuery. Below is my try.

aside = $("#tabaside");
var tr = $("<tr>");
var td = $("<td>");

for (var i = 0; i < filmidata.arr.length; i++) {
  $(aside).append(tr);
  $(tr).append(td).text("text");
  $(tr).append(td).text("text");
  $(tr).append(td).text("text");
}

Every append call appends the same element, causing nothing additional to be appended. You have to create something new in every iteration of your loop. — Heretic Monkey
– Heretic Monkey, Commented Jun 8, 2021 at 15:51

Barmar · Accepted Answer · 2021-06-08 15:51:06Z

5

You need to create a new tr for each row, and a new td for each cell. .append() doesn't make copies, it just keeps reusing the same DOM element.

You can use a nested loop to repeat the code for the cells.

const aside = $("#tabaside");
for (var i = 0; i < filmidata.arr.length; i++) {
  let tr = $("<tr>");
  $(aside).append(tr);
  for (let j = 0; j < 3; j++) {
    $(tr).append($("<td>", {
      text: "text"
    }));
  }
}

answered Jun 8, 2021 at 15:51

Barmar

789k57 gold badges554 silver badges668 bronze badges

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

Collectives™ on Stack Overflow

Create table using jQuery and .append

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related