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:

When I run this it inserts the dynamic HTML above the table instead of inside the table's body.
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 ?
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>

target the <tbody> instead

roullie
– roullie

2015-06-02 06:25:40 +00:00
Commented Jun 2, 2015 at 6:25 — roullie
– roullie, Commented Jun 2, 2015 at 6:25

Satpal · Accepted Answer · 2015-06-02 06:35:36Z

9

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

edited Jun 2, 2015 at 6:35

answered Jun 2, 2015 at 6:25

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

keewee279 Over a year ago

Thanks a lot - this fixes 1) and 2) from my questions and works perfect ! Can you help me with question 3 as well ? These will always be series of numbers starting from 1 and ending at a variable number that is entered by the user.

Satpal Over a year ago

@keewee279, See updated answer, Changes for (var i = 1; i <= 5; i++) replace 1 and 5 with required number

Coding world Over a year ago

here 2 is set as constant number. How to add dynamic data to dynamically created table

Ward D.S. · Accepted Answer · 2015-06-02 06:34:34Z

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.

answered Jun 2, 2015 at 6:34

Ward D.S.

5583 silver badges11 bronze badges

Comments

omikes · Accepted Answer · 2015-06-02 06:45:55Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related