Таблица динамического создания в javascript не отображает столбец должным образом
Я создаю динамическую таблицу, используя функцию изменения текстового поля. Он показывает все строки и столбцы, но столбцы отображаются неправильно. Как я могу это исправить?
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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Добавьте 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)">Привет, таблица создана идеально динамично. Но когда я использую текстовое поле второй раз для создания таблицы. первый тоже появляется. Мне нужно сохранить последнюю версию для отображения. Не предыдущие. У тебя есть идея? Или это новый вопрос для публикации? Пожалуйста, дайте мне знать. Спасибо.
Если вам нужно, чтобы в любой момент отображалась только одна таблица из toggleTable, пусть table будет переменной настойчивый, а не переменной, ограниченной только внутренней частью toggleTable. Если table существует при запуске toggleTable, удалите его из документа (или очистите его textContent, если вы хотите использовать его повторно)
Спасибо за ваше время. Я только что закончил! Имел две переменные для текстового поля (старое и новое значение). наличие еще одного события onchange для текстового поля, чтобы узнать, совпадает ли значение или нет. если значение не совпадает, тогда elementbyid.mydiv.innerhtml = ""; работает отлично :-)
Большое спасибо за помощь и объяснение.