我如何在表格中像这样格式化我的数据答案

【问题标题】：How can i format my data like this in table我如何在表格中像这样格式化我的数据
【发布时间】：2021-04-29 08:28:30
【问题描述】：

我有一个动态数据，其中它们具有相同的楼层编号，所以我想做的是每个具有相同编号的数据都将在其楼层的一行下方。我想让每一行都是他们的一行，然后在所有这些都是他们的单位。他们有任何图书馆吗？谢谢

const data = [
{floornumber: 1, unitname: '101', unitype: 'basic'},
{floornumber: 1, unitname: '102', unitype: 'basic'},
{floornumber: 1, unitname: '103', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'},
{floornumber: 2, unitname: '203', unitype: 'basic'}

]
<table>  
<thead>
    <th>
      Floor
    </th>
    <th>
      Unit Name
    </th>
    <th>
      Unit Type
    </th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>101</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>102</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>103</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>203</td>
      <td>Basic</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>203</td>
      <td>Basic</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css dynamic

【解决方案1】：

我认为没有这样的库，因为它是一种非常独特的数据呈现方式。您必须确保您的数据按楼层号排序。然后我会阅读第一行并创建行集：

    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>blank</td>
      <td>101</td>
      <td>Basic</td>
    </tr>

遍历您的数据并创建行集 b：

    <tr>
      <td>blank</td>
      <td>102</td>
      <td>Basic</td>
    </tr>

直到楼层号码改变。在这种情况下，再次创建行集 a，依此类推，直到您位于数据的末尾。

【讨论】：