[英]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
HTML是但onclick函數后javascript無法在div中呈現
[英]html is but javascript is not rendering in div after onclick function
HTML：使用JavaScript時，“表格”中的“ div”呈現怪異
[英]Html: “div” inside “table” renders weird when using javascript
javascript 為什么我不能使用 javascript function appendchild 到 html div
[英]javascript why i cannot appendchild to html div using javascript function
使用javascript將div內的文本更改為負的html代碼
[英]changing text inside a div to negative html code using javascript
限制使用javascript在特定div窗口上的html內部對象拖動
[英]Restrict dragging of object inside html on specific div window using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.