Javascript/jQuery: динамическое добавление строк в тело таблицы (с использованием массивов)

Я новичок в Javascript и надеюсь, что кто-то здесь поможет мне в этом.

У меня есть HTML-страница со таблицей на ней и хотелось бы использовать JS для динамического добавления строк с определенным контентом в тело таблицы.

До сих пор у меня есть приведенный ниже код, который здесь сокращен (в действительности больше строк и столбцов и т.д.), что вызывает у меня следующие проблемы:

Когда я запустил это, он вставляет динамический HTML над таблицей вместо внутри тела таблицы.
Он не применяет к нему никаких стилей (которые определяются классами в моем CSS), поэтому он просто показывает содержимое ячеек без применения границы или ширины столбцов и т.д. Должен ли я как-то сказать это он также должен применять стили CSS к этому?
Кроме того, мне было интересно, есть ли способ, который в первой переменной I не нужно перечислить все номера отдельно, а вместо этого просто напишите первый (1) и последний (5) номер серии, поскольку они просто просты последовательности, такие как 1, 2, 3, 4, 5.

Может кто-нибудь сказать мне, что я делаю неправильно здесь?

Мой JS:

$('#btnStart').on('click', function(){
    var cols = [1, 2, 3, 4, 5];
    var tbody = '';
    var i;
    for (i = 0; i < cols.length; i++) {
        tbody += cols[i] + "<tr> \
                <td class='td col1'>1</td> \
                <td class='td col2'>2</td> \
                <td class='td col3'><div contenteditable='true' class='editable'></div></td> \
            </tr>";
    }
    $('#bodyCal').html(tbody);
});

Мой HTML:

<table class="tblCal">
    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
    </colgroup>
    <thead>
        <tr>
            <th colspan="3" class="th th2">Col 1</th>
        </tr>
    </thead>
    <tbody>
        <div id="bodyCal"></div>
    </tbody>
</table>

Ответ 1

Вы должны настроить таргетинг tbody, чтобы присвоить ему ID. Также обратите внимание, что div не может быть дочерним элементом tbody

Допустимое содержимое: ноль или более элементов <tr>.

Соответствующие изменения HTML:

<tbody id="bodyCal">
</tbody>

Для третьего вопроса:

var tbody = '';
for (var i = 1; i <= 5; i++) {
    tbody +=  "<tr> <td class='td col1'>" + i +" </td> \
                <td class='td col2'>2</td> \
                <td class='td col3'><div contenteditable='true' class='editable'></div></td> \
            </tr>";
}
$('#bodyCal').html(tbody);

DEMO

Ответ 2

За третий вопрос:

var cols = [1, 5];

for (i = cols[0]; i <= cols[1]; i++) {

теперь ваш цикл for будет работать со значениями 1, 2, 3, 4 и 5 для i.

Вы можете упростить его:

для (i = 1; я <= 5; я ++) {

Но это устраняет возможность передачи начального и конечного параметров, поэтому не так практично при тестировании разных диапазонов.

Ответ 3

Вы должны поместить идентификатор bodyCal рядом с тегом body таблицы, так как таблица не может содержать div, если только это не обернуто в тег td. Попробуйте следующее:

$('#btnStart').on('click', function(){
    var cols = [1, 2, 3, 4, 5];
    var tbody = "";
    var i;
    for (h = 0; h < 5; h++)
    {
        tbody += "<tr>\
";
        for (i = 0; i < cols.length; i++) {
            tbody += "<td class='td col" + cols[i] + "'>" + cols[i] + "</td> \
";
        }        
        tbody += "<\tr>\
";
    }
    $('#bodyCal').html(tbody);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tblCal">
    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
    </colgroup>
    <thead>
        <tr>
            <th colspan="3" class="th th2">Col 1</th>
        </tr>
    </thead>
    <tbody id="bodyCal">
    </tbody>
</table>

<button id="btnStart">Start</button>