Ввод текста в динамической таблице javascript
Я пытаюсь создать текстовое поле в таблице: Таблица увеличивается с вводом пользователя, поэтому я не могу просто написать синтаксис ввода в html-документе, потому что ячейка не создается с самого начала.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
// down here is the problem
var x =row.insertCell(1);
x.innerHTML = document.createElement("INPUT")
x.innerHTML.setAttribute("type", "text");
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы пытаетесь назначить ссылку HTMLInputElement, которая возвращается из вызова document.createElement("input");, несуществующему свойству innerHTML ссылки HTMLTableRowElement (newRow в моем примере), возвращаемой insertCell(1);.
Вместо этого вы можете присвоить любое текстовое значение атрибуту value в HTMLInputElement (переменная input в моем примере) и добавить динамический ввод во вновь созданную ячейку.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
var newRow =row.insertCell(1);
var input = document.createElement("input");
input.type = "text";
input.value= description
newRow.appendChild(input);
}
tableAdd();<body>
<input type = "text" id = "Titel" value = "test"/>
<input type = "text" id = "Description" value = "test"/>
<table id = "table">
</table>
<button onclick = "tableAdd()">add</button>
</body>Вот справочная документация:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCellhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Проблема в том, что x.innerHTML - это строка, а не элемент html. Вам нужно установить атрибут для элемента html, а не для строки. Сделать можно так:
var x =row.insertCell(1);
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
x.appendChild(y);