Rendering HTML table inside
using javascript function

Question

I'm trying to get my javascript function that creates a html table in my content div on my website. The problem is, that it is not displayed inside the div but under it. How can I put it inside?

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

This is my basic website with the navigationbar. When I run it with xampp the js function tableCreate(); is displayed after the panel-container div closes.

Here is my js code:

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)

Thanks in advance.

You are appending the table to the body so you need to append it to the div with the id of `tabs1-schicht` — Rafael, Dec 10 '14 at 07:10
complex js like these might not work on all browsers. i suggest you use a js library like jquery. — astroanu, Dec 10 '14 at 07:44
@astro I looked up your suggestion. I changed my table creation to something simular to http://stackoverflow.com/a/1413984/4344444. It works now. thanks a lot =D — CuChulla1nn, Dec 10 '14 at 13:40

score 1 · Answer 1 · answered Dec 10 '14 at 07:40

1

Use document.getElementById('tabs1-schicht'); instead of document.getElementsByTagName('body')[0];

answered Dec 10 '14 at 07:40

bht

11
2

I changed the code. Now it's not displayed anymore. – CuChulla1nn Dec 10 '14 at 07:47
Probably because your js code is missing closing brace for the function. Inspect your code to see if there are any JavaScript errors. – bht Dec 10 '14 at 08:12
Actually is it good to execute it as a function? Or is it better to just implement the script on top of the html page. Because don't I say in the js file where I want to put the table? – CuChulla1nn Dec 10 '14 at 08:15
using functions make your code much neater. this code `document.getElementById('tabs1-schicht');' is telling you js where to put the table. – bht Dec 10 '14 at 08:22

score 0 · Answer 2 · answered Dec 10 '14 at 07:59

0

Replace

body.appendChild(tbl)

with

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

answered Dec 10 '14 at 07:59

The KNVB

3,588
3
29
54

score 0 · Answer 3 · answered Dec 10 '14 at 08:42

You code should be something like this:

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

I tried it like this. in jsfiddle and on xampp. There is no output. — CuChulla1nn, Dec 10 '14 at 13:10
just copy the whole code as is and save it as html document. It should work. — bht, Dec 10 '14 at 16:46

score 0 · Answer 4 · answered Dec 10 '14 at 13:41

0

@astro I looked up your suggestion. I changed my table creation to something simular to stackoverflow.com/a/1413984/4344444. It works now. thanks a lot =D

answered Dec 10 '14 at 13:41

CuChulla1nn

9
1
7

Rendering HTML table inside using javascript function

4 Answers4

Rendering HTML table inside
using javascript function