我正在使用文本框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>
发布于 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)">
https://stackoverflow.com/questions/51663205
复制相似问题