如何将对象数组中的数据显示到表中

Question

我正在尝试根据用户输入制作数据表。 我发现了这个解决方案，我正在根据用户输入制作对象并将它们推送到数组中。 在那之后，我正在做一个for循环来制作td。 但不知何故，这些数据不是逐行出现，而是并排出现。 我在这里做错了什么，每次我刷新页面时数组都变空了如何防止这种情况帮助我解决 tnx。

 const form = document.getElementById("form");
    const carDatas = [];

class Car {
  constructor(plate, carMaker, carModel, carOwner, carPrice, carColor) {
    (this.plate = plate),
      (this.carMaker = carMaker),
      (this.carModel = carModel),
      (this.carOwner = carOwner),
      (this.carPrice = carPrice),
      (this.carColor = carColor);
  }
}

form.addEventListener("submit", (e) => {
  const plate = document.getElementById("plate").value;
  const carMaker = document.getElementById("carMaker").value;
  const carModel = document.getElementById("carModel").value;
  const carOwner = document.getElementById("carOwner").value;
  const carPrice = document.getElementById("carPrice").value;
  const carColor = document.getElementById("carColor").value;

  const carDetails = new Car(
    plate,
    carMaker,
    carModel,
    carOwner,
    carPrice,
    carColor
  );
  carDatas.push(carDetails);
  console.log(carDetails);

  for (let i = 0; i < carDatas.length; i++) {
    document.getElementById(
      "data"
    ).innerHTML = ` <td>${carDatas[i].plate}  </td>
     <td>${carDatas[i].carMaker}  </td>
     <td>${carDatas[i].carModel}  </td>
     <td>${carDatas[i].carOwner}  </td>
     <td>${carDatas[i].carPrice}  </td>
     <td>${carDatas[i].carColor}  </td>`;
  }

  e.preventDefault();
});

这是我的表格 HTML

<div class="database">
    <h1>Cars Database</h1>
    <table>
      <tr>
        <th>LICENCE</th>
        <th>MAKER</th>
        <th>MODEL</th>
        <th>OWNER</th>
        <th>PRICE</th>
        <th>COLOR</th>
      </tr>
      <tr id="data"></tr>
    </table>
  </div>

Answer 1

<pre>This is what I recommend I changed your code to add <tr></tr> to each line that's to be created and wrap your <tr> inbetween and tbody tag and use the first line has a head.</pre>

<pre>For the code:</pre>
<code>
for (let i = 0; i < carDatas.length; i++) {
document.getElementById(
  "data"
).innerHTML = `<tr><td>${carDatas[i].plate}  </td>
 <td>${carDatas[i].carMaker}  </td>
 <td>${carDatas[i].carModel}  </td>
 <td>${carDatas[i].carOwner}  </td>
 <td>${carDatas[i].carPrice}  </td>
 <td>${carDatas[i].carColor}  </td> </tr>`;
}

e.preventDefault();



<body>
<div class="database">
<h1>Cars Database</h1>
    <table>
        <thead>
          <tr>
            <th>LICENCE</th>
            <th>MAKER</th>
            <th>MODEL</th>
            <th>OWNER</th>
            <th>PRICE</th>
            <th>COLOR</th>
          </tr>
        </thead>
        <tbody id="data">   <tbody>
    </table>
</div>

</body>
</code>

如何将对象数组中的数据显示到表中

问题描述

1 个解决方案

解决方案1
0 2022-09-06 22:45:50

如何将对象数组中的数据显示到表中

问题描述

1 个解决方案

解决方案1 0 2022-09-06 22:45:50

解决方案1
0 2022-09-06 22:45:50