Populate Bootstrap 4 Table From Array?

Question

I'm currently trying to dynamically populate a bootstrap 4 table from an array. I am trying to populate 3 tables that are actually side by side, and then will eventually filter the data from the array to be stored in each corresponding table. So what I am aiming to have is 3 tables that can be populated with a different number of rows each, with data taken directly from an array.

However, whenever I try and populate or create the table dynamically through a function, I either remove the Bootstrap formatting, or end up with some very odd results!

Below is essentially the type of layout I want to achieve, but this is static and I'd love to have something that can acquire these varying rows, based on how much data they retrieve from an array.

    <div class="row">

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 1</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 1</td>
                        <td class="col-md-2">Content 1</td>
                        <td class="col-md-3">Content 1</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 2</td>
                        <td class="col-md-2">Content 2</td>
                        <td class="col-md-3">Content 2</td>
                    </tr>
                     <tr>
                        <td class="col-md-1">Content 3</td>
                        <td class="col-md-2">Content 3</td>
                        <td class="col-md-3">Content 3</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 2</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 4</td>
                        <td class="col-md-2">Content 4</td>
                        <td class="col-md-3">Content 4</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 5</td>
                        <td class="col-md-2">Content 5</td>
                        <td class="col-md-3">Content 5</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 6</td>
                        <td class="col-md-2">Content 6</td>
                        <td class="col-md-3">Content 6</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 7</td>
                        <td class="col-md-2">Content 7</td>
                        <td class="col-md-3">Content 7</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 8</td>
                        <td class="col-md-2">Content 8</td>
                        <td class="col-md-3">Content 8</td>
                    </tr>
                  </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 3</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 9</td>
                        <td class="col-md-2">Content 9</td>
                        <td class="col-md-3">Content 9</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 10</td>
                        <td class="col-md-2">Content 10</td>
                        <td class="col-md-3">Content 10</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 11</td>
                        <td class="col-md-2">Content 11</td>
                        <td class="col-md-3">Content 11</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 12</td>
                        <td class="col-md-2">Content 12</td>
                        <td class="col-md-3">Content 12</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 13</td>
                        <td class="col-md-2">Content 13</td>
                        <td class="col-md-3">Content 13</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 14</td>
                        <td class="col-md-2">Content 14</td>
                        <td class="col-md-3">Content 14</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 15</td>
                        <td class="col-md-2">Content 15</td>
                        <td class="col-md-3">Content 15</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

When experimenting with just a single one of these tables to try and get the general concept working, I've just been going around in circles and can't seem to figure out this hierarchy of table elements and how to associate the javascript created rows to the bootstrap classes for design.

Below is my attempt, but it doesn't seem to alter the base bootstrap html or make any changes at all (one of numerous attempts)(credit to Ovidiu for fixing the error):

var testList = ["TestContent1", "TestContent2", "TestContent3", "TestContent4"];

    function drawTable1() {
        // get the reference for the body
        var table1 = document.getElementById('table1Div');

        // get reference for <table> element
        var tbl = document.getElementById("table1");

        // creating rows
        for (var r = 0; r < testList.length; r++) {
            var row = document.createElement("tr");

         // create cells in row
             for (var c = 0; c < 3; c++) {
                var cell = document.createElement("td");
                var cellText = document.createElement('span');
                cellText.innerText = testList[r];
                cell.appendChild(cellText);
                row.appendChild(cell);
            }           

    tbl.appendChild(row); // add the row to the end of the table body
        }

     table1.appendChild(tbl); // appends <table> into <div>
}

drawTable1();

Edit: To clarify, my question differs from the duplicate as I would still like to retain my bootstrap formatting. Simply creating a dynamic table removes all of the bootstrap classes and formatting that keeps the tables responsive.

Edit 2: Thank you Ovidiu for the working fiddle ! This more clearly illustrates my point that the Bootstrap formatting is no longer applied once the table has been populated dynamically!

Answer 1

To add classes from JavaScript use className property:

var div = document.createElement('div');
div.className = 'some-class other-class';

You may also want to avoid using classes like col-md-3 with tables. Bootstrap layoud is float based while tables have their own display types in HTML/CSS and changing them to floats won't work (especially that you are not using row on rows etc.). Either move to purely <div> based layout or use width=8% , width=17% and width=25% respectively. And of course fix the bug of the widths not summing up to 100% ( col-md-1 + col-md-2 + col-md-3 = col-md-6 < col-md-12 (12 is 100% row width in Bootstrap)). Or if you really want free space, then either add it explicitly as an empty cell or just set the whole table width to be 50%.

---

Answer to comment: If you are going to use table-stripped then you need table to be <table> and not <div> , obviously. However you MUST NOT use col-md-# classes with table cells. Use width="33%" (or other appropriate value) attribute instead. If you create the whole table content dynamically, you may add <colgroup> sections and define columns separately from the content. Also, you should append your rows inside <tbody> not <table> . Appending them to <table> works only due to browser being backward compatibile with HTML 3, but Bootstrap is not and its styling gets broken. Bootstrap expects all the cells to be either in <thead> , <tbody> or <tfoot> , not directly under <table> . Example code:

<table class="table table-striped">
    <colgroup>
        <col width="17%">
        <col width="33%">
        <col width="50%">
    </colgroup>
    <tbody id="table2">
    <tr>
        <td>Content 4</td>
        <td>Content 4</td>
        <td>Content 4</td>
    </tr>
    <!-- etc. --->
    </tbody>
</table>