[英]html is but javascript is not rendering in div after onclick function
[英]Rendering HTML table inside <div> using javascript function
我正在尝试获取可在我的网站上的内容div中创建html表的javascript函数。 问题是,它不在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)
提前致谢。
使用document.getElementById('tabs1-schicht');
而不是document.getElementsByTagName('body')[0];
更换
body.appendChild(tbl)
同
var div4=document.getElementById("tabs1-kontakt");
div4.appendChild(tbl);
您的代码应如下所示:
<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>
@astro我查了你的建议。 我将表创建更改为类似于stackoverflow.com/a/1413984/4344444的表。 现在可以使用了。 非常感谢= D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.