时间戳

首页 > 解决方案 > 在动态 javascript 表中输入文本

javascript - 在动态 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");


 }

标签： javascripthtml

解决方案

您正在尝试将HTMLInputElement调用返回的引用分配给（在我的示例中）引用document.createElement("input");的不存在innerHTML属性，由.HTMLTableRowElementnewRowinsertCell(1);

相反，您可以将任何文本值分配给(在我的示例value中为变量) 的属性，并将动态输入附加到新创建的单元格。HTMLInputElementinput

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/insertCell https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

推荐阅读