Javascript / jQuery: How to dynamically add rows to table body (using arrays)

Question

I am new to Javascript and hope someone here can help me with this.

I have an HTML page with a table on it and would like to use JS to dynamically add rows with certain content to the table's body.

So far I have the below code which is shortened here (in reality there are more rows and columns etc.) which is causing me the following issues:

1. When I run this it inserts the dynamic HTML above the table instead of inside the table's body.
2. It does not apply any styles to it (which are defined by the classes in my CSS) so it just shows the cells' content without applying border or column width styles etc. Do I have to tell it somehow that it has to apply the CSS styles to this as well ?
3. Also, I was wondering if there is a way that in the first variable I don't have to list all numbers separately but instead just write the first (1) and last (5) number of a series as they are just simple sequences like 1, 2, 3, 4, 5.

Can someone tell me what I am doing wrong here ?

My 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);
});

My 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>

Answer 1

You should target tbody so assign the ID to it. Also note div can't be the child of tbody

Permitted content: Zero or more <tr> elements.

Relevant HTML changes:

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

For 3rd Question:

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

Answer 2

For your 3rd question:

var cols = [1, 5];

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

now your for loop will run with values 1, 2, 3, 4 and 5 for i.

You could simplify it further:

for (i = 1; i <= 5; i++) {

But this removes the possibility of passing a start and end parameter, so not as practical when testing different ranges.

Answer 3

You must place the "bodyCal" id next to the table body tag, as a table cannot contain a div unless it is wrapped in a td tag. Try this:

$('#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>