时间戳

首页 > 解决方案 > 对象 HTMLInputElement 出现而不是复选框

javascript - 对象 HTMLInputElement 出现而不是复选框

问题描述

我试图在按下 Add Item 按钮后在 Collected 列中出现一个复选框，但是，[object HTMLInputElement] 出现了。我已经尝试过 appendChild、insertBefore 和删除 innerHTML，但显然这让事情变得更糟。我曾尝试在 Google 和 Stackoverflow 上搜索类似问题以获得相关答案，但没有人遇到与我类似的情况。

function addItem() {
  var a = String(document.getElementById("it").value);
  var b = parseFloat(document.getElementById("iq").value);
  if (a.length === 0 || isNaN(b)) {
    window.alert("Required field empty, please enter values in both boxes.");
  } else {
    var table = document.getElementById("list");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cb = document.createElement("INPUT");
    cb.setAttribute("type", "checkbox");
    cell1.innerHTML = a;
    cell2.innerHTML = b;
    cell3.innerHTML = cb;
  }
}
<table id="list" align="center">
  <tr>
    <td colspan="3">
      <input id="it" name="item" type="text" placeholder="Item" />
      <input id="iq" name="quantity" type="text" placeholder="No." />
      <br />
      <input value="Add Item" type="submit" onclick="addItem()" />
      <hr />
    </td>
  </tr>
  <tr>
    <td><span>Item</span></td>
    <td><span>Quantity</span></td>
    <td><span>Collected</span></td>
  </tr>
</table>

标签： javascripthtml

解决方案

您需要使用 appendChild 而不是覆盖单元格的 innerHTML。您正在向 DOM 添加一个新元素。这可以通过将 HTML 写入单元格来完成，但您已经创建了元素，所以只需附加它..

function addItem() {
  var a = String(document.getElementById("it").value);
  var b = parseFloat(document.getElementById("iq").value);
  if (a.length === 0 || isNaN(b)) {
    window.alert("Required field empty, please enter values in both boxes.");
  } else {
    var table = document.getElementById("list");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cb = document.createElement("INPUT");
    cb.setAttribute("type", "checkbox");
    cell1.innerHTML = a;
    cell2.innerHTML = b;
    cell3.appendChild(cb);
  }
}
<table id="list" align="center">
  <tr>
    <td colspan="3">
      <input id="it" name="item" type="text" placeholder="Item" />
      <input id="iq" name="quantity" type="text" placeholder="No." />
      <br />
      <input value="Add Item" type="submit" onclick="addItem()" />
      <hr />
    </td>
  </tr>
  <tr>
    <td><span>Item</span></td>
    <td><span>Quantity</span></td>
    <td><span>Collected</span></td>
  </tr>
</table>

推荐阅读