如何从对象数组生成表格？解决数据排列及刷新丢失问题

问题1：表格数据横向排列，无法按行展示 #

原因分析 #

1. 所有车辆的<td>被塞进同一个<tr id="data">标签，未为每辆车生成独立行
2. 循环中使用innerHTML = ...会覆盖之前内容，最终仅显示最后一条数据

修复方案 #

• 不为行固定ID，每次新增车辆时生成独立的<tr>节点
• 要么拼接所有行的HTML后一次性插入，要么直接将新行追加到表格中

问题2：页面刷新后数据丢失 #

原因分析 #

JavaScript数组存储在浏览器内存中，页面刷新时内存被清空，数据随之丢失

修复方案 #

使用localStorage实现数据持久化：

• 新增车辆时，将carDatas数组转为JSON字符串存入localStorage
• 页面加载时，从localStorage读取数据并还原为Car对象数组，重新渲染表格

完整修复代码 #

HTML代码 #

<div class="database">
    <h1>Cars Database</h1>
    <table id="carTable">
      <tr>
        <th>LICENCE</th>
        <th>MAKER</th>
        <th>MODEL</th>
        <th>OWNER</th>
        <th>PRICE</th>
        <th>COLOR</th>
      </tr>
      <!-- 动态生成行，无需固定<tr>标签 -->
    </table>
  </div>

JavaScript代码 #

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

// 页面加载时从localStorage恢复数据
window.addEventListener('load', () => {
  const savedData = localStorage.getItem('carDatas');
  if (savedData) {
    // 将JSON字符串还原为Car对象数组
    carDatas = JSON.parse(savedData).map(item => new Car(
      item.plate,
      item.carMaker,
      item.carModel,
      item.carOwner,
      item.carPrice,
      item.carColor
    ));
    // 渲染已保存的数据
    renderCarTable();
  }
});

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) => {
  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;

  const carDetails = new Car(plate, carMaker, carModel, carOwner, carPrice, carColor);
  carDatas.push(carDetails);
  
  // 保存数据到localStorage
  localStorage.setItem('carDatas', JSON.stringify(carDatas));
  
  // 重新渲染表格
  renderCarTable();
  
  // 清空表单输入
  form.reset();
});

// 封装表格渲染函数
function renderCarTable() {
  // 清空表头外的所有行
  const targetContainer = carTable.querySelector('tbody') || carTable;
  while (targetContainer.children.length > 1) {
    targetContainer.removeChild(targetContainer.lastChild);
  }
  
  // 循环生成每一行数据
  carDatas.forEach(car => {
    const row = document.createElement('tr');
    row.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>
    `;
    targetContainer.appendChild(row);
  });
}

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