如何使用 JavaScript 中的 forEach 方法将输入值附加到 html table？

Question

我想使用 forEach 从所有输入字段获取输入值，并想 return 一个对象并发送到 table 进行显示。请帮忙。

HTML

<form>
      <input name="date" value="date" type="date" placeholder="date" />
      <input name="item" value="item" type="text" placeholder="item name" />
      <input name="qty" value="qty" type="text" placeholder="quantity" />
      <input name="amt" value="amt" type="text" placeholder="price" />
      <button type="submit">submit</button>
    </form>

    <div class="container">
      <table>
        <tr>
          <th width="10%">Sr.No.</th>
          <th width="10%">Date</th>
          <th width="60%">Name</th>
          <th width="10%">Quantity</th>
          <th width="10%">Price</th>
        </tr>
        <tr class="datafield">
          <!-- <td>1</td>
          <td>1.1.2022</td>
          <td>pencil</td>
          <td>5</td>
          <td>45</td> -->
        </tr>
        <tr>
          <td colspan="4" align="right"><b>TOTAL</b></td>
          <td>0.00</td>
        </tr>
      </table>
    </div>

脚本这是我写的 javascript 代码。我不明白如何附加 html.

const inputs = [...document.querySelectorAll("input")];
      const button = document.querySelector("button");
      const datafield = document.querySelector(".datafield");

      button.addEventListener("click", (e) => {
        e.preventDefault();
        let datafield = {};
        let x = [];
        inputs.forEach((input, index) => {
          x.push(input.value);
        });
        datafield.innerHTML = `<td>1</td>
          <td>1.1.2022</td>
          <td>pencil</td>
          <td>5</td>
          <td>45</td>`;
      });

Answer 1

您的第一个问题是两次分配数据字段。因此，当您设置数据字段的 innerHTML 时，您实际上是在事件侦听器内部定义的变量上调用它，该变量不是包含 DOM 元素的变量。

尝试：

const inputs = [...document.querySelectorAll('input')];
const button = document.querySelector('button');
const datafield = document.querySelector('.datafield');

button.addEventListener('click', (e) => {
  e.preventDefault();
  let x = [];
  inputs.forEach((input, index) => {
    x.push(input.value);
  });

  datafield.innerHTML += x.map((item) => `<td>${item}</td>`).join('');
});

Answer 2

我找到路了。检查下面的更新代码。

HTML

<form>
      <input name="sr.no" value="1" type="number" placeholder="sr.no" />
      <input name="date" value="date" type="date" placeholder="date" />
      <input name="item" value="item" type="text" placeholder="item name" />
      <input name="qty" value="qty" type="text" placeholder="quantity" />
      <input name="amt" value="amt" type="text" placeholder="price" />
      <button type="submit">submit</button>
    </form>

    <div class="container">
      <table>
        <tr>
          <th width="10%">Sr.No.</th>
          <th width="10%">Date</th>
          <th width="60%">Name</th>
          <th width="10%">Quantity</th>
          <th width="10%">Price</th>
        </tr>
        <tr class="datafield"></tr>
        <tr>
          <td colspan="4" align="right"><b>TOTAL</b></td>
          <td>0.00</td>
        </tr>
      </table>
    </div>

脚本

const button = document.querySelector("button");
  const inputs = [...document.querySelectorAll("input")];
  const datafield = document.querySelector(".datafield");

  button.addEventListener("click", (e) => {
    e.preventDefault();
    const tr = document.createElement("tr");
    inputs.forEach((input, index) => {
      const td = document.createElement("td");
      tr.appendChild(td);
      const values = document.createTextNode(input.value);
      td.appendChild(values);
      console.log(td);
      datafield.insertAdjacentElement("beforebegin", tr);
      input.value = "";
    });
  });

如何使用 JavaScript 中的 forEach 方法将输入值附加到 html table？

How to append input values to a html table using forEach method in JavaScript?

javascript

foreach

html-table