使用展开和折叠按钮对相同数据的 html 表行进行分组
Posted
技术标签:
【中文标题】使用展开和折叠按钮对相同数据的 html 表行进行分组【英文标题】：Group html table rows of same data with expand and collapse button 【发布时间】：2018-01-06 05:48:34 【问题描述】：我有按类别和 sku 显示销售数据的 html 表，如下链接所示
Current table
但我想实现如下链接所示
Expected Table View 任何 jquery 插件可以做到这一点？请帮忙
【问题讨论】：
【参考方案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，但餐巾纸没有展开/折叠选项，总售出的数量也不起作用以上是关于使用展开和折叠按钮对相同数据的 html 表行进行分组的主要内容，如果未能解决你的问题，请参考以下文章
ant-design-vue:table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩-展开所有缩回所有和单项展开缩回并存开发