使用展开和折叠按钮对相同数据的 html 表行进行分组答案

【问题标题】：Group html table rows of same data with expand and collapse button使用展开和折叠按钮对相同数据的 html 表行进行分组
【发布时间】：2018-01-06 05:48:34
【问题描述】：

我有按类别和 sku 显示销售数据的 html 表，如下链接所示

Current table

但我想实现如下链接所示

Expected Table View 任何 jquery 插件可以做到这一点？请帮忙

【问题讨论】：

标签： jquery html css datatables html-table

【解决方案1】：

你可以实现这个代码：

在此处查看演示：https://output.jsbin.com/ticumux#

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.cat-plus {
    background-image:url("../images/plus.png"); 
    background-repeat:no-repeat; background-position:-15px center;
    border-left: 20px solid green;
}       
.cat-minus {
   background-image:url("../images/minus.png");
   background-repeat:no-repeat; 
   background-position:-15px center;
   border-left: 20px solid red;
}
</style>

<script>
    $(document).ready(function(){
        $(".toggler").click(function(e){
            e.preventDefault();
            //the data stored in the data-prod-cat
            var prodCat = ($(this).attr("data-prod-cat"));
            //toggle the link clicked on
            $(".cat" + prodCat).toggle();
            //select the parent and find the span so you can
            //toggle the "cat-plus" class
            $(this).parent().find("span").toggleClass("cat-plus");
            //toggle the cat-minus class
            $(this).toggleClass("cat-minus");
        });
    });
</script>

</head>
<body>

<table>
  <thead>
    <tr>
        <th>Category</th>
        <th>SKU</th>
        <th>Description</th>
        <th>jul-30</th>
        <th>jul-29</th>
        <th>jul-28</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Napkin</td>
        <td></td>
        <td></td>
        <td>32</td>
        <td>54</td>
        <td>54</td>
    </tr>
    <tr>
        <td><a href="#" class="toggler" data-prod-cat="1"><span class="cat-plus">+</span></a> Table Runner</td>
        <td></td>
        <td></td>
        <td>43</td>
        <td>76</td>
        <td>54</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>ABC Here</td>
        <td>2234</td>
        <td>43</td>
        <td>76</td>
        <td>54</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>ABC Here</td>
        <td>2234</td>
        <td>43</td>
        <td>76</td>
        <td>54</td>
    </tr>
    </tbody>
</table>
</body>
</html>

【讨论】：

感谢@CKG，但餐巾纸没有展开/折叠选项，总售出的数量也不起作用