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");
}

Answer 1

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" })); } }