CODEWITHSUNDEEP
javascripthtmlcssflask
Max Powers
Max Powers

Reputation: 1179

javascript tables not being placed inside div

I have this HTML file which has this div and I want the javascript files I am calling which creates some tables. The tables are being created outside the div. How can I get the tables created inside the div?

here is my html file:

{%extends 'layout.html'%}

{%block body%}

<link rel="stylesheet" href="../static/style.css">

{%block content%}


    <div class="jumbotron text-center">

        <!-- TABLE DATA FOR TABLE1 -->
        <script type="text/javascript" >
            var tableData = {{ table1|safe }}
        </script>
        <script src="../static/merit_table.js"></script>

        <!-- TABLE DATA FOR TABLE2 -->
        <script type="text/javascript">
            var tableData = {{ table2|safe }}
        </script>
        <script src="../static/merit_table.js"></script>

        <!-- TABLE DATA FOR TABLE3 -->
        <script type="text/javascript">
            var tableData = {{ table3|safe }}
        </script>
        <script src="../static/merit_table.js"></script>

    </div>

{%endblock%}

{%endblock%}

here is my css file:

table{
    table-layout: fixed;
    width: 300px;
    margin: 0 auto; /* or margin: 0 auto 0 auto */
}

th, td {
    width: 250px;
    font-size : 130%;

}

here is my javascript file:

var table = document.createElement('table');


for (var key in tableData) {
    var tr = document.createElement('tr');

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    var text1 = document.createTextNode(key);
    var text2 = document.createTextNode(tableData[key]);

    td1.appendChild(text1);
    td2.appendChild(text2);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
document.body.appendChild(table);

Upvotes: 0

Views: 50

Answers (1)

guyot
guyot

Reputation: 363

You're appending the table to the document body rather than to the div. Try giving your div an id and then appending to that id instead of to the body. Something like:

html line 10: <div class="jumbotron text-center" id="table-div">

JS last line: document.getElementByID("table-div").appendChild(table);

Upvotes: 2

Related Questions