Как добавить элемент с большим количеством дочерних элементов?

Question

мне нужно добавить таблицу, но я делаю это неправильный путь .. У меня есть это:

$("#times").append('<table id="departure_' + i + '" width="50%"> <tbody><tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr></tbody></table>'); 

это masive линия не делают таблицы, но много рабочих таблиц .. трудно стиле. как я могу это исправить?

увидеть в действии здесь: http://codepen.io/shiva112/pen/JGXoVJ?editors=001

Answer 1

Проблема заключается в том, что вы прилагая всю таблицу в течение заявления. Вы должны сделать что-то вроде этого

// Select or create a table here 
var table = $("#my-target-table"); 
var tableContent = ""; 
for (var i = 0; i < data.times.length; ++i) { 
    tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>' 
} 

table.find('tbody').html(tableContent);