使用jquery显示两个透视表

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

var data = [
  { category: 'A', value: 10 },
  { category: 'B', value: 20 },
  { category: 'A', value: 30 },
  { category: 'B', value: 40 },
  // 更多数据...
];

// 第一个透视表
var pivotTable1 = {};
$.each(data, function(index, item) {
  if (!pivotTable1[item.category]) {
    pivotTable1[item.category] = 0;
  }
  pivotTable1[item.category] += item.value;
});

// 第二个透视表
var pivotTable2 = {};
$.each(data, function(index, item) {
  if (!pivotTable2[item.category]) {
    pivotTable2[item.category] = [];
  }
  pivotTable2[item.category].push(item.value);
});

// 显示第一个透视表
$.each(pivotTable1, function(category, value) {
  $('#pivotTable1').append('<tr><td>' + category + '</td><td>' + value + '</td></tr>');
});

// 显示第二个透视表
$.each(pivotTable2, function(category, values) {
  var row = '<tr><td>' + category + '</td>';
  $.each(values, function(index, value) {
    row += '<td>' + value + '</td>';
  });
  row += '</tr>';
  $('#pivotTable2').append(row);
});

<table id="pivotTable1">
  <tr>
    <th>Category</th>
    <th>Value</th>
  </tr>
</table>

<table id="pivotTable2">
  <tr>
    <th>Category</th>
    <th>Value 1</th>
    <th>Value 2</th>
    <!-- 更多列... -->
  </tr>
</table>