渲染HTML表格里面 <div> 使用javascript功能
[英]Rendering HTML table inside <div> using javascript function
问题描述
I'm trying to get my javascript function that creates a html table in my content div on my website. 
我正在尝试获取可在我的网站上的内容div中创建html表的javascript函数。 The problem is, that it is not displayed inside the div but under it. 问题是，它不在div内部而是在div下面显示。 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(); 当我用xampp运行它时，js函数tableCreate（）; is displayed after the panel-container div closes. 在面板容器div关闭后显示。
Here is my js code: 这是我的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)
Thanks in advance. 提前致谢。
4 个解决方案
解决方案1
1 2014-12-10 07:40:33
Use document.getElementById('tabs1-schicht'); 使用document.getElementById('tabs1-schicht'); instead of document.getElementsByTagName('body')[0]; 而不是document.getElementsByTagName('body')[0];
解决方案2
0 2014-12-10 07:59:33
Replace 更换
body.appendChild(tbl)
with 同
var div4=document.getElementById("tabs1-kontakt");
div4.appendChild(tbl);
解决方案3
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>
解决方案4
0 2014-12-10 13:41:26
@astro I looked up your suggestion. @astro我查了你的建议。 I changed my table creation to something simular to stackoverflow.com/a/1413984/4344444. 我将表创建更改为类似于stackoverflow.com/a/1413984/4344444的表。 It works now. 现在可以使用了。 thanks a lot =D 非常感谢= D
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.