javascript表没有放在div中

时间:2017-06-04 22:25:01

标签: javascript html css flask

我有这个HTML文件有这个div我想要我调用的javascript文件创建一些表。这些表是在div之外创建的。如何获取div中创建的表格?

这是我的html文件:

{%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%}

这是我的css文件:

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

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

}

这是我的javascript文件:

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

1 个答案:

答案 0 :(得分:2)

您将表附加到文档正文而不是div。尝试给你的div一个id,然后附加到id而不是身体。类似的东西:

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

JS最后一行:document.getElementByID("table-div").appendChild(table);