javascript中的动态创建表未正确显示列
javascript中的动态创建表未正确显示列
提问于 2018-08-03 06:58:00
我正在使用文本框onchange函数创建一个动态表。它显示所有行和列，但是列没有正确显示。我怎么才能修复它？
function toggleTable(val) {
var root = document.getElementById("mydiv");
var table = document.createElement('table');
table.className = "mytable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var rowcnt = val;
headerList = ["One", "Two", "Three"];
var tr = document.createElement('tr');
// Header row
for (var j = 0; j < 3; j++) {
var th = document.createElement('th'); //column
var text = document.createTextNode(headerList[j]); //cell
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < rowcnt; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
//tr.appendChild(td);
for (var j = 0; j < 3; j++) {
var element = document.createElement("input");
element.type = "text";
element.name = "sch" + i;
if (i >= 0 && j == 0) {
element.value = "Sch" + i;
}
tr.appendChild(element);
}
}
root.appendChild(table);
} <
/script><style>.mytable {
width: 200px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: lightblue;
}
.mytable td {
border: 1px solid #000000;
}
</style><!doctype html>
<html>
<head>
<title>hellotest table </title>
</head>
<body>
<center>
<h1>table test </h1>
</center>
<div id="mydiv"></div> <input type="text" name="sch" value="0" onChange="toggleTable(this.value)">
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-03 07:01:07
将input附加到td，然后将td附加到tr。现在，您直接将input附加到tr，这是不起作用的。
(这就是为什么精确的变量名称很有用的原因之一-例如，名为element的变量比名为input的变量更难理解)
var input = document.createElement("input");
input.type = "text";
input.name = "sch" + i;
const td = document.createElement('td');
td.appendChild(input);
if (i >= 0 && j == 0) {
input.value = "Sch" + i;
}
tr.appendChild(td);
function toggleTable(val) {
var root = document.getElementById("mydiv");
var table = document.createElement('table');
table.className = "mytable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var rowcnt = val;
headerList = ["One", "Two", "Three"];
var tr = document.createElement('tr');
// Header row
for (var j = 0; j < 3; j++) {
var th = document.createElement('th'); //column
var text = document.createTextNode(headerList[j]); //cell
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < rowcnt; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
//tr.appendChild(td);
for (var j = 0; j < 3; j++) {
var input = document.createElement("input");
input.type = "text";
input.name = "sch" + i;
const td = document.createElement('td');
td.appendChild(input);
if (i >= 0 && j == 0) {
input.value = "Sch" + i;
}
tr.appendChild(td);
}
}
root.appendChild(table);
}.mytable {
width: 200px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #517994;
background-color: lightblue;
}
.mytable td {
border: 1px solid #000000;
}<center>
<h1>table test </h1>
</center>
<div id="mydiv"></div> <input type="text" name="sch" value="0" onChange="toggleTable(this.value)">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51663205
复制相关文章
相似问题