动态生成TD：用户输入表格行覆盖及刷新数据丢失问题求助

问题1：新输入数据覆盖已有行 #

你的代码在表单提交循环中，每次都用innerHTML = ...直接替换tbody的全部内容，而且循环每执行一次就覆盖一次，最终只会显示数组的最后一条数据，自然无法保留之前的行。

修复方式 #

重新封装渲染逻辑：先清空tbody，再循环数组创建每一行，或者只添加新提交的行。这里推荐全量渲染，方便后续结合本地存储同步数据。

问题2：页面刷新后数据清空 #

carDatas数组存在浏览器内存里，页面刷新时JS会重新执行，数组被重置为空。需要用localStorage把数据持久化到本地，刷新后读取恢复。

修改后的完整代码 #

JavaScript部分

const form = document.getElementById("form");
const tbody = document.getElementById("data");
// 页面加载时从本地存储读取数据，无数据则初始化空数组
let carDatas = JSON.parse(localStorage.getItem("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;
  }
}

// 封装表格渲染函数，复用性更强
function renderTable() {
  // 先清空tbody内容
  tbody.innerHTML = "";
  // 循环生成每一行并添加到tbody
  carDatas.forEach(car => {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${car.plate}</td>
      <td>${car.carMaker}</td>
      <td>${car.carModel}</td>
      <td>${car.carOwner}</td>
      <td>${car.carPrice}</td>
      <td>${car.carColor}</td>
    `;
    tbody.appendChild(tr);
  });
}

// 页面加载完成后自动渲染已有数据
window.addEventListener("DOMContentLoaded", renderTable);

form.addEventListener("submit", (e) => {
  e.preventDefault();
  
  // 获取表单输入值
  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;

  // 创建Car实例并加入数组
  const carDetails = new Car(plate, carMaker, carModel, carOwner, carPrice, carColor);
  carDatas.push(carDetails);
  
  // 将数组存入本地存储，实现持久化
  localStorage.setItem("carDatas", JSON.stringify(carDatas));
  
  // 重新渲染表格
  renderTable();
  
  // 可选：清空表单，提升用户体验
  form.reset();
});

HTML部分（无需修改）

<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>

关键改动说明 #

1. 数据持久化：初始化carDatas时从localStorage读取，每次新增数据后同步保存到本地
2. 渲染逻辑优化：封装renderTable函数，先清空tbody再全量渲染，避免行覆盖问题
3. 页面加载渲染：添加DOMContentLoaded事件，页面加载完成后自动渲染已有数据
4. 代码规范：修正Car构造函数的逗号语法，移除无用的count变量，添加表单重置提升体验

内容的提问来源于stack exchange，提问作者Hasan