Rendering HTML table inside <div> 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
– Rafael, Commented Dec 10, 2014 at 7:10
complex js like these might not work on all browsers. i suggest you use a js library like jquery. — astroanu
– astroanu, Commented Dec 10, 2014 at 7:44
@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 — CuChulla1nn
– CuChulla1nn, Commented Dec 10, 2014 at 13:40

bht · Accepted Answer · 2014-12-10 07:40:33Z

1

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

answered Dec 10, 2014 at 7:40

bht

112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CuChulla1nn Over a year ago

I changed the code. Now it's not displayed anymore.

bht Over a year ago

Probably because your js code is missing closing brace for the function. Inspect your code to see if there are any JavaScript errors.

CuChulla1nn Over a year ago

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?

bht Over a year ago

using functions make your code much neater. this code `document.getElementById('tabs1-schicht');' is telling you js where to put the table.

The KNVB · Accepted Answer · 2014-12-10 07:59:33Z

0

Replace

body.appendChild(tbl)

with

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

answered Dec 10, 2014 at 7:59

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Comments

bht · Accepted Answer · 2014-12-10 08:42:00Z

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.
just copy the whole code as is and save it as html document. It should work.

CuChulla1nn · Accepted Answer · 2014-12-10 13:41:26Z

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, 2014 at 13:41

CuChulla1nn

91 silver badge7 bronze badges

Collectives™ on Stack Overflow

Rendering HTML table inside <div> using javascript function

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related