Блог

Главная - Вопросы по программированию - Динамическая генерация таблиц в jQuery

Динамическая генерация таблиц в jQuery

#javascript #jquery #html-table

#javascript #jquery #html-таблица

Вопрос:

Как я могу динамически генерировать HTML <table> с переменным количеством строк?

Количество строк будет зависеть от количества свойств, существующих внутри объекта Javascript.

 function showTable(trnum) //number of table rows passed in
{
   // how?
   // $("#elem").foo // #elem - element container for table
}

Ответ №1:

 function showTable(trnum) {
    var tableCode = "<table>";
    for (var i=0; i<trnum; i  ) {
        tableCode  = "<tr>"   "stuff inside each tr ?"   "</tr>";
    }
    tableCode  = "</table>";
    $("#elem").append(tableCode);
}

Комментарии:

1. Вы пропустили добавление тегов TD внутри строк, и, похоже, код также создает дополнительный завершающий тег TR. Не так ли?

2. Дополнительным конечным тегом TR должен быть тег table.

3. Действительно, последний тег — это </table> ! И он не уточнил, как он хотел, чтобы <td> теги были вставлены, вот почему я написал «материал внутри каждого tr?» вместо этого.

Ответ №2:

Перейдите по ссылке. Генерация HTML-таблиц с помощью jQuery. Демонстрационный вариант можно посмотреть здесь

Комментарии:

1. Вы оставили номера строк в коде в вашем jsFiddle и забыли установить для фреймворка значение jQuery . Также вы не вызывали функцию js для создания таблицы. Я обновил ваш jsFiddle, вы можете изменить свою ссылку на http://jsfiddle.net/dJUKd/3 /

2. @Sylvain. Спасибо, что сделали это …. :-)) К вашему сведению, указанные вещи уже были там, и демо работало нормально.

Ответ №3:

Вы могли бы попробовать это:

 $.createTable = function(trnum)
{
    var reps = new Array(trnum);
    var table = $('<table></table>');
    $.each(reps,function(){ 
        var td    = $('<tr><td> Stuff here </td></tr>');
        table.append(td)     
    }); 
    $('#elem').append(table);
}

Вызывающая функция:

 $.createTable(6);