Используйте динамически создаваемый html контент позже с jQuery

Question

У меня есть метод, в котором я динамически создаю таблицу и присваиваю ее локальной переменной:

 var content = $('<table id="gvCapitalByYear" cellspacing="0"
       cellpadding="2"/>').append('<tbody/>');

Затем у меня есть цикл, который предназначен для добавления строк в созданную выше таблицу. Но я никак не могу это сделать. Я попробовал следующее:

content=$('#gvCapitalByYear').find('tbody').append('<tr/>');

но он не работает, так как, по моему мнению, элемент с идентификатором "gvCapitalByYear" нигде не был добавлен, он просто создан на лету и хранится в переменной. Можно ли каким-то образом использовать переменную содержимого, получить динамически созданную таблицу, добавить определенное количество строк и переназначить ее обратно в переменную содержимого?

Answer 1

Вам нужно будет использовать content переменная вместо запроса DOM для этих элементов (например, $('#gvCapitalByYear')) потому что контент еще не был прикреплен к DOM.

Как только вы оберните таблицу HTML как объект jQuery, вы можете запросить и манипулировать ею, как и любым другим объектом jQuery. Объект "живой", поэтому вам не нужно переназначать content переменная, когда вы добавляете больше контента.

var content = $('<table id="gvCapitalByYear" cellspacing="0" cellpadding="2"><tbody></tbody></table>');
//later, add as many rows as you like
content.find('tbody').append('<tr><td>Some Content Here</td></tr>');

Также, table, tbody а также tr элементы не являются самозакрывающимися тегами, вам нужно иметь открывающий тег и закрывающий тег для каждого из них, чтобы он был действительным HTML.

Рабочая Демо

Answer 2

Попробуй это

$('body').append('<table id="gvCapitalByYear" cellspacing="0"
   cellpadding="2"></table>');

затем

$('#gvCapitalByYear').append('<tr><td>my data</td><td>more data</td></tr>');