Question

我正在努力解决这个问题一段时间，并且真的很感激，如果有人能够对我如何向前推进有所了解。

我们的想法是通过以下格式对相关数据进行分组来减少表中的行数。

我需要将来自服务器（非分组数据）的JSON响应转换为特定格式，以便我可以使用分组数据绘制表格。

**Initial Layout**
+------------+-----------+--------+------------+
| Category   | Product   |  Size  |   Shipping  
+------------+-----------+--------+------------+
| Category 1 | Product 1 | Big    | Free    | 
| Category 1 | Product 2 | Small  | Free    |
| Category 1 | Product 3 | Big    | Free    |
| Category 1 | Product 4 | Small  | Free    |
+------------+-----------+--------+-------------

**Expected Result**
+------------+----------------------+--------+-----------
| Category   | Product              |  Size  |   Shipping  
+------------+----------------------+--------+------------
| Category 1 | Product 1, Product 3 | Big    | Free    | 
|            | Product 2, Product 4 | Small  | Free    |
+------------+----------------------+--------+----------

jsfiddle中的更多细节： https://jsfiddle.net/zy8kj2tb/2/

// please see the code in jsfiddle

Answer 1

<h3>
Initial layout:
</h3>
<h6>

<p>
Category = Category 1, Category 2, etc or "blank"
</p>
<p>
Product = Product 1, Product 2, etc or "blank"
</p>
<p>
Size = Big, Small, XL, etc or "blank"
</p>
<p>
Shipping = Free, Standard, Expedited, etc or "blank"
</p>
<p>
dont group blank rows with cat, prod, size = make it as individual row
</p>

</h6>

<div id="initialLayout">

</div>
<h3>Expected result:</h3>
<table id="expectedTable" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <th>Category</th>
    <th>Product</th>
    <th>Size</th>
    <th>Shipping</th>
  </tr>
  <tr>
    <td rowspan=2>Category 1</td>
    <td rowspan="2">Product 1, Product 3 <br>Product 2, Product 4</td>
    <td rowspan="2">Big <br>Small</td>
    <td rowspan="2">Free</td>
  </tr>



</table>
<br/>

只需用这个替换你的HTML，我做了两件事 -

使用 -
更改了第一行

    <td rowspan="2">Product 1, Product 3 <br>Product 2, Product 4</td>
            <td rowspan="2">Big <br>Small
    </td>

从第二行中删除了相应的td标记

Answer 2

我只看了你的代码

你写过的地方

  <td rowspan=2>Category 1</td>
  <td>Product 1, Product 3</td>
  <td>Big</td>
  <td rowspan=2>Free</td>

应该是

<td rowspan="2">Category 1</td>
<td>Product 1, Product 3</td>
<td>Big</td>
<td rowspan="2">Free</td>

你刚刚错过了一些引用

使用rowspan对HTML表行进行分组

2 个答案: