基于JavaScript生成JSON表格：顶部独立表格实现求助

API 探路者

2026-5-15

解决方案：拆分JSON生成顶部独立表格+下方数据表格

嘿，这问题不难搞定！你已经搞定了下方表格的生成，只需要把指定的字典项单独拎出来生成顶部表格，剩下的按原逻辑处理就好。我给你整理了完整的实现代码：

首先，先调整你的HTML结构，新增一个顶部表格的容器（用来放test那组数据）：

<!-- 顶部独立表格 -->
<table class="table" id="top_table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

<!-- 下方数据表格 -->
<table class="table" id="trades_table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
</table>

然后修改你的JavaScript代码，先单独处理顶部的test数据，再处理剩下的test2及其他数据：

$(function() {
  // 你的JSON数据
  const trades = { 
    "test": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 }, 
    "test2": { "col1": 1, "col2": 2, "col3": 3, "col4": 4, "col5": 5 } 
  };

  // 1. 处理顶部独立表格：提取test数据生成行
  const topTbody = $("<tbody />");
  const topTr = $("<tr />");
  $.each(trades.test, function(_, text) {
    topTr.append("<td>" + text + "</td>");
  });
  topTr.appendTo(topTbody);
  topTbody.appendTo("#top_table");

  // 2. 处理下方数据表格：删除已处理的test，循环剩下的对象
  delete trades.test;
  const tbody = $("<tbody />");
  $.each(trades, function(_, obj) {
    const tr = $("<tr />");
    $.each(obj, function(_, text) {
      tr.append("<td>" + text + "</td>");
    });
    tr.appendTo(tbody);
  });
  tbody.appendTo("#trades_table");
});