求助：基于Ajax/JSON生成水平对比表格的格式问题

看起来你现在的核心问题是生成表格时没遵循标准HTML表格的层级结构，导致内容都堆叠在一起了。咱们只需要严格按照<table>、<tr>（行）、<td>（单元格）的嵌套逻辑来构建，就能得到你想要的水平表格效果。

具体修正思路： #

• 点击按钮时先清空目标容器，避免多次点击重复生成内容
• 完整构建表格DOM结构：先创建表格主体，按需添加表头，再用<tbody>承载数据行
• 遍历匹配到的数据，为每条数据创建一行，在该行内生成对应单元格并填充内容
• 最后把组装好的表格插入到页面指定位置

修改后的代码示例： #

$(document).ready(() => {
  $(".compareAll").click(function(e) {
    e.preventDefault(); // 防止按钮触发默认行为（比如表单提交）
    console.log("click");

    // 1. 从localStorage获取保存的ID列表
    const savedIds = JSON.parse(localStorage.getItem('yourSavedIdKey')) || [];
    // 2. 这里替换成你实际获取JSON数据的逻辑（下面是模拟数据）
    const jsonData = [
      { id: 1, productName: "商品A", price: "¥199", stock: 20 },
      { id: 2, productName: "商品B", price: "¥299", stock: 15 },
      { id: 3, productName: "商品C", price: "¥399", stock: 8 }
    ];

    // 3. 匹配ID，筛选出符合条件的数据
    const matchedItems = jsonData.filter(item => savedIds.includes(item.id));

    // 4. 开始构建标准表格
    const $table = $('<table>').addClass('styled-table'); // 自定义样式类方便美化
    // 构建表头（根据你的数据字段调整）
    const $headerRow = $('<tr>');
    $headerRow.append($('<th>').text('ID'));
    $headerRow.append($('<th>').text('商品名称'));
    $headerRow.append($('<th>').text('价格'));
    $headerRow.append($('<th>').text('库存'));
    $table.append($('<thead>').append($headerRow));

    // 构建数据行
    const $tbody = $('<tbody>');
    matchedItems.forEach(item => {
      const $row = $('<tr>');
      $row.append($('<td>').text(item.id));
      $row.append($('<td>').text(item.productName));
      $row.append($('<td>').text(item.price));
      $row.append($('<td>').text(item.stock));
      $tbody.append($row);
    });
    $table.append($tbody);

    // 5. 将表格插入到页面目标容器（比如id为table-wrapper的元素）
    $('#table-wrapper').empty().append($table);
  });
});

额外优化提示： #

可以给表格加一点基础CSS样式，让它更接近你预期的纯HTML表格效果：

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.styled-table th, .styled-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.styled-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

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