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.
4 answers
solution1
1 2014-12-10 07:40:33
Use document.getElementById('tabs1-schicht'); instead of document.getElementsByTagName('body')[0];
solution2
0 2014-12-10 07:59:33
Replace
body.appendChild(tbl)
with
var div4=document.getElementById("tabs1-kontakt");
div4.appendChild(tbl);
solution3
0 2014-12-10 08:42:00
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>
solution4
0 2014-12-10 13:41:26
@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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.