使用 rowspan 对 HTML 表行进行分组

Question

I am struggling with this issue for a while and really appreciate if someone can give some idea on how I can move forward with.

The idea is to reduce the number of rows in the table by grouping the relevant data in the below format.

I need to convert the JSON response coming from server (non-grouped data) to a particular format so that I can paint the table with the grouped data.

**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    |
+------------+----------------------+--------+----------

More details in the 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/>

Just replace your HTML with this one, I did two things -

• Changed first row with -

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

• Removed respective td tags from the second row

Answer 2

I just looked at your code

where you have written

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

It should be

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

you have just missed some quotes