示例功能：
1. 点击“作品”按钮，会显示author的作品信息
2. 再次点击“作品”按钮，会收起author的作品信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table中的分类展开与收起</title>
<style>
table thead{
background-color: #d0e4fe;
}
table tbody{
background-color: lightgreen;
}
</style>
</head>
<body>
<table align="center">
<thead align="center">
<tr>
<th style="width: 50px;">ID</th>
<th style="width: 180px;">Author</th>
<th style="width: 120px;">Operation</th>
</tr>
</thead>
<tbody align="center">
<!-- 父级元素fid=0 -->
<tr sequence="1" fid="0">
<td>1</td>
<td>余华</td>
<td><button class="bookShow" status="true">作品</button></td>
</tr>
<!-- 子级元素fid==所属父级元素的sequence值 -->
<tr sequence="2" fid="1">
<td>1-1</td>
<td>《活着》</td>
<td></td>
</tr>
<tr sequence="3" fid="1">
<td>1-2</td>
<td>《许三观卖血记》</td>
<td></td>
</tr>
<!-- 父级元素 0 -->
<tr sequence="4" fid="0">
<td>2</td>
<td>曹文轩</td>
<td><button class="bookShow" status="true">作品</button></td>
</tr>
<tr sequence="5" fid="4">
<td>2-1</td>
<td>《草房子》</td>
<td></td>
</tr>
<tr sequence="6" fid="4">
<td>2-2</td>
<td>《青铜葵花》</td>
<td></td>
</tr>
</tbody>
</table>
<!-- 引入jquery.js -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var sequence_fid;
//1. 非父级元素 初始时隐藏
$("tbody tr[fid!='0']").hide();
//2. 点击“作品”按钮的触发事件
$(".bookShow").click(function(){
//status为true,则展开
if($(this).attr('status') == 'true')
{
$(this).attr('status', 'false'); //表示已经展开
sequence_fid = $(this).parent().parent().attr('sequence');
$(`tbody tr[fid="${sequence_fid}"]`).show();
}
else //status为false,则收起
{
$(this).attr('status', 'true'); //表示已收起
sequence_fid = $(this).parent().parent().attr('sequence');
$(`tbody tr[fid="${sequence_fid}"]`).hide();
}
})
</script>
</body>
</html>运行结果：
