javascript - 需要帮助和建议来创建复杂的表格定位

Question

我想创建一个简单的表格，但它的定位非常复杂。我不知道如何管理它。

所以我需要通过 Ajax JSON 从 API 获取数据。然后整理成这样:

问题是，有3个JSON，

1. 首先是用户数量
2. 第二个是数据包名称(即 POS 2 x 1 jam 3 bulan，库存 3 x 1 jam 3 bulan，等等)
3. 第三个和最后一个是价格

这是我的 JSON 及其格式的示例:

用户数量:

  [[{"id":1,"user_qty":1},
    {"id":2,"user_qty":2},
    {"id":3,"user_qty":5},
    {"id":4,"user_qty":30}]]

数据包名称:

 [[{"id":1,"name":"POS","training":"2 x 1 Jam","maintenance":"3 Bulan"},
    {"id":2,"name":"INVENTORY","training":"3 x 1 Jam","maintenance":"3 Bulan"},
    {"id":3,"name":"POS PLATINUM","training":"3 x 1.5 Jam","maintenance":"3 Bulan"},
    {"id":4,"name":"STANDARD","training":"4 x 1.5 Jam","maintenance":"3 Bulan"}]]

价格

 [[{"id":1,"packet_id":1,"user_qty_id":1,"harga":"2300000"},
    {"id":2,"packet_id":1,"user_qty_id":2,"harga":"3000000"},
    {"id":3,"packet_id":1,"user_qty_id":3,"harga":"4000000"},
    {"id":4,"packet_id":1,"user_qty_id":4,"harga":"6000000"},
    {"id":5,"packet_id":2,"user_qty_id":1,"harga":"4100000"},
    {"id":6,"packet_id":2,"user_qty_id":2,"harga":"5200000"},
    {"id":7,"packet_id":2,"user_qty_id":3,"harga":"6200000"},
    {"id":8,"packet_id":2,"user_qty_id":4,"harga":"8200000"},
    ]]

谁能帮我安排一下？如果您感到困惑或有其他意见或想法，请发表评论。

谢谢。

Answer 1

你的意思是这样的？

table {
  background-color:#000;
  color:#fff;
  padding:20px;
  border-collapse:separete;
}
td {padding:10px;}
.trTop td:last-child {text-align:right;}
.trBot td {text-align:right;}

<table>
  <tr>
    <th>1 user</th>
    <th>2 user</th>
    <th>5 user</th>
    <th>30 user</th>  
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
  <tr class="trTop">
    <td colspan="2">Accounting platnum</td>
    <td colspan="2">2 x 1 jam 3 bulan</td>
  </tr>
  <tr class="trBot">
    <td>9.000.000.000</td>
    <td>19.000.000.000</td>
    <td>29.000.000.000</td>
    <td>39.000.000.000</td>
  </tr>
</table>