Построение HTML-таблицы

#jquery #append

#jquery #добавить

Вопрос:

Я создаю таблицу из объекта JSON. Первым шагом является создание заголовков столбцов таблицы:

 jq_tblRow = $('<tr>') ;
obj_Report.fieldMetadata.forEach( function(elt) {
   jq_tblRow.append('<th>'   elt.name)
}) ;

Это дает строку с заголовками столбцов:

 <tr><th>Item Type</th><th>Title</th> ... etc... </tr>

Есть ли более простой способ обернуть это с помощью тегов TABLE и THEAD? Вот к чему я пришел в итоге. Это работает, но 2 вызова «.append ()» кажутся неудобными.

 jq_tblRow = $('<table>').append( $('<thead>').append(jq_tblRow) );

Я пробовал различные комбинации

  .append('<table><thead>')

использование append, appendTo, prepend, before, after и т. Д. И их перестановок.

1. Существуют и другие методы, которые могли бы сделать то же самое, но все это вписывается в однострочную строку… насколько проще вы ожидаете, что это станет?

2. Однако обратите внимание, что jq_tblRow теперь фактически вся таблица, а не строка, которую вы добавили … не уверен, для чего предназначено это назначение

Ответ №1:

Если у вас уже есть элемент jQuery, вы можете использовать wrap() функцию, чтобы обернуть его некоторыми дополнительными тегами :

 jq_tblRow = $('<tr>') ;
obj_Report.fieldMetadata.forEach( function(elt) {
    jq_tblRow.append('<th>'   elt.name)
});
// After you have your row in the DOM, wrap it with table/thead tags
jq_tblRow.wrap('<table><thead></thead></table>');

wrap() Функция также может принимать функцию, если вам нужно обрабатывать более сложные операции или предпочитаемый вид объединения каждой стороны :

 jq_tblRow.wrap(function(){
     return '<table><thead>'   this.innerHTML   '/thead></table>';
});