3

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!

Questionnaire
  • 149
  • 2
  • 9
  • 1
    Possible duplicate of [Generate HTML table from 2D JavaScript array](https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array) – Mostafa Jul 19 '18 at 11:32
  • probably duplicate of [this](https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array) – Mostafa Jul 19 '18 at 11:33
  • I believe my question moreso focuses on how to dynamically create the table but retain the bootstrap formatting and classes! – Questionnaire Jul 19 '18 at 11:44
  • your fiddle has errors - you cannot append text directly as an element http://jsfiddle.net/8s5rgwp4/ (working version) – Ovidiu Dolha Jul 19 '18 at 11:51

1 Answers1

2

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>
jaboja
  • 2,178
  • 1
  • 21
  • 35
  • Hi Jaboja, thank you for your reply! I took onboard your suggestions but unfortunately, I'm still unable to retain any of the bootstrap formatting through dynamic generation of the content using JavaScript. The initial table fiddle http://jsfiddle.net/8s5rgwp4/26/ is still seeing issues with remaining responsive or even just retaining the table-striped attribute. But I also tried creating an example using
    's as you suggested here http://jsfiddle.net/aq9Laaew/110319/, but this is resulting in even stranger outcomes!
     – Questionnaire Jul 24 '18 at 15:27
  • There are a few problems with your code. See my edit to the answer. – jaboja Jul 25 '18 at 09:57
  • Brilliant! Worked like a charm! Thank you so much! – Questionnaire Jul 25 '18 at 17:28