Question

我正在尝试使用我的javascript函数在我的网站上的内容div中创建一个html表。问题是，它不会显示在div内部，而是显示在div下面。我怎么把它放进去？

<div id="tab-container" class='tab-container'>
    <ul class='etabs'>
        <li class='tab'><a href="#tabs1-start">Start</a></li>
        <li class='tab'><a href="#tabs1-schicht">Schichtplan</a></li>
        <li class='tab'><a href="#tabs1-rechnung">Rechnung</a></li>
        <li class='tab'><a href="#tabs1-kontakt">Kontakt</a></li>
    </ul>
    <div class='panel-container'>
        <div id="tabs1-start">
            Test page 1
        </div>
        <div id="tabs1-schicht">
            <script type"text/javascript">
                tableCreate();
            </script>
        </div>
        <div id="tabs1-rechnung">
            Test page3

        </div>
        <div id="tabs1-kontakt">
            Test page4
        </div>
    </div>
</div>

这是我的导航栏基本网站。当我用xampp运行js函数tableCreate（）;在面板容器div关闭后显示。

这是我的js代码：

function tableCreate(){
//var schicht=["datum","schicht","schicht","schicht","dispo","schicht","schicht","schicht","schicht","schicht","schicht","dispo"];
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='100%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<28;i++){
    var tr=document.createElement('tr');
    for(var j=0;j<12;j++){
        if(i==27 && j==12){
                break   
                 } else {
        var td=document.createElement('td');
        td.appendChild(document.createTextNode('schicht'))
        tr.appendChild(td)
        }
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)

提前致谢。

Answer 1

使用document.getElementById('tabs1-schicht');代替document.getElementsByTagName('body')[0];

Answer 2

替换

body.appendChild(tbl)

与

var div4=document.getElementById("tabs1-kontakt");
div4.appendChild(tbl);

Answer 3

您的代码应该是这样的：

<html>
        <head>
            <script>
                function tableCreate() {
                    //var schicht=["datum","schicht","schicht","schicht","dispo","schicht","schicht","schicht","schicht","schicht","schicht","dispo"];
                    var body = document.getElementById('tabs1-schicht');
                    var tbl = document.createElement('table');
                    tbl.style.width = '100%';
                    tbl.setAttribute('border', '1');
                    var tbdy = document.createElement('tbody');
                    for (var i = 0; i < 28; i++) {
                        var tr = document.createElement('tr');
                        for (var j = 0; j < 12; j++) {
                            if (i == 27 && j == 12) {
                                break
                            } else {
                                var td = document.createElement('td');
                                td.appendChild(document.createTextNode('schicht'))
                                tr.appendChild(td)
                            }
                        }
                        tbdy.appendChild(tr);
                    }
                    tbl.appendChild(tbdy);
                    body.appendChild(tbl)
                }
            </script>
        </head>
        <body>
            <div id="tab-container" class='tab-container'>
                <ul class='etabs'>
                    <li class='tab'><a href="#tabs1-start">Start</a></li>
                    <li class='tab'><a href="#tabs1-schicht">Schichtplan</a></li>
                    <li class='tab'><a href="#tabs1-rechnung">Rechnung</a></li>
                    <li class='tab'><a href="#tabs1-kontakt">Kontakt</a></li>
                </ul>
                <div class='panel-container'>
                    <div id="tabs1-start">
                        Test page 1
                    </div>
                    <div id="tabs1-schicht">
                        <script>
                            tableCreate();
                        </script>
                    </div>
                    <div id="tabs1-rechnung">
                        Test page3

                    </div>
                    <div id="tabs1-kontakt">
                        Test page4
                    </div>
                </div>
            </div>
        </body>
    </html>

Answer 4

@astro我抬头看了你的建议。我将表创建更改为类似于stackoverflow.com/a/1413984/4344444的内容。它现在有效。非常感谢= D

使用javascript函数</div>在<div>中渲染HTML表

4 个答案: