javascript - 使用 Javascript 在表格内创建一个文本框

Question

我想在每个附加的表行内创建一个输入控件。基本上就像一个购物车，我可以为表中的每件商品添加数量。我正在挣扎。当我按照下面的方式执行操作时，我会显示 [object HTMLInputElement]。

x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
var create = document.body.appendChild(x);

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
    <td(${items.indexOf(item)})">${item.title}</td>
   <td>${item.genre}</td>
   <td>${"R" + item.price }</td>
   <td>${x}</td> `;
carttable.append(row);

Answer 1

您可以使用 append 方法将创建的 input 添加到 td 并添加该 td到 row 元素。

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
  <td(${items.indexOf(item)})">${item.title}</td>
  <td>${item.genre}</td>
  <td>${"R" + item.price }</td>
`;

let cell = document.createElement('td');
let input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("value", "Hello World!");
cell.append(input);
row.append(cell);

carttable.append(row);

或者不要使用 document.createElement 创建输入，而是将其添加到 row.innerHTML 中的模板文字字符串中。

let carttable = document.getElementById('cartlist');
let item = items[index];
let row = document.createElement('tr');
row.innerHTML = `
  <td(${items.indexOf(item)})">${item.title}</td>
  <td>${item.genre}</td>
  <td>${"R" + item.price }</td>
  <td><input type="text" value="Hello World!"></td>
`;

carttable.append(row);