Question

我的html表包含按类别和sku的销售数据，如下面链接

所示

Current table

但我想实现如下链接

所示

Expected Table View 任何jquery插件都可以做到吗？请帮忙

Answer 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>

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

1 个答案: