如何用现有AJAX+JSON代码将SQL结果渲染为分字段单元格的HTML表格

核心逻辑 #

无需改动原有AJAX请求、JSON解析、折扣计算的核心逻辑，仅调整结果渲染的DOM结构，将原单条结果的全字段混排div，替换为标准HTML表格结构，每个字段独立占单元格。

具体修改步骤 #

• 调整结果区初始化逻辑
  原来结果区清空后直接循环追加内容，现在在结果存在时先插入带表头的表格框架，可直接复用你引入的Bootstrap内置样式类，不需要额外编写CSS：

  // 替换原来的 wrapper.innerHTML = ""; 这段代码
  wrapper.innerHTML = `
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Category</th>
        <th>OEM #</th>
        <th>Price</th>
        <th>Select Discount</th>
      </tr>
    </thead>
    <tbody id="result-tbody"></tbody>
  </table>
  `;
  

• 替换单条结果的渲染逻辑
  原来循环内创建div承载所有字段的代码，替换为创建表格行<tr>，每个字段拆到独立的<td>单元格，保留原有折扣链接、价格span的结构，保证原有交互逻辑不失效：

  // 替换原来循环内创建div的整段逻辑
  for (i = 0; i < results.length; i++) {
    let row = document.createElement("tr");
    row.id = `res${i}`;
    row.innerHTML = `
      <td>${results[i].category}</td>
      <td>${results[i].oemnumber}</td>
      <td>$<span data-price="${results[i].price}">${results[i].price}</span></td>
      <td>
        <a href="#70">%70</a>
        <a href="#60">%60</a>
        <a href="#50">%50</a>
        <a href="#100">100%</a>
      </td>
    `;
    // 把行追加到表格的tbody容器里，而不是直接挂到#results下
    document.getElementById("result-tbody").appendChild(row);
  }
  

• 优化事件绑定的选择器范围
  原来的document.querySelectorAll('a')会抓取页面全量链接，容易绑定到非结果区的元素上，改成只抓取结果范围内的链接，避免影响其他页面组件：

  // 替换原来的 var links = document.querySelectorAll('a');
  var links = document.querySelectorAll('#result-tbody a');
  

注意事项 #

• 原有折扣计算的核心逻辑完全兼容，因为价格span的data-price属性、链接和价格节点的父子层级没有变化，原来的event.target.parentElement.querySelector('[data-price]')选择逻辑可以正常工作
• 原无结果时的提示逻辑不需要调整，因为提示内容是直接赋值给#results的innerHTML，会自动覆盖之前的表格框架
• 原有代码中100%折扣的链接href误写为#50，因为折扣计算是抓取链接innerText的数字完成的，不影响功能，但建议修正为对应锚点更规范
• 如果不需要Bootstrap的表格样式，去掉<table>标签上的class属性即可自定义样式

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