把多个表格整合成一个表格，并且每个表格可以 展开/隐藏
<div id="table">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>李白</td>
<td>18</td>
<td>13900001111</td>
</tr>
<tr>
<td>02</td>
<td>张三</td>
<td>18</td>
<td>13900001112</td>
</tr>
<tr>
<td>03</td>
<td>小吴</td>
<td>18</td>
<td>13900001113</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>李白</td>
<td>18</td>
<td>13900001111</td>
</tr>
<tr>
<td>02</td>
<td>张三</td>
<td>18</td>
<td>13900001112</td>
</tr>
<tr>
<td>03</td>
<td>小吴</td>
<td>18</td>
<td>13900001113</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>李白</td>
<td>18</td>
<td>13900001111</td>
</tr>
<tr>
<td>02</td>
<td>张三</td>
<td>18</td>
<td>13900001112</td>
</tr>
<tr>
<td>03</td>
<td>小吴</td>
<td>18</td>
<td>13900001113</td>
</tr>
</tbody>
</table>
</div>
<!--主要部分-->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript">
// 让所有表格数据隐藏
var num = document.getElementsByTagName('table').length
for (var i = 0; i < num; i++ ){
document.getElementsByTagName('tbody')[i].style.display = "none"
}
var btn = document.getElementsByTagName('thead');
$("thead").click(function () {
// 点击第几个表
var m = $("thead").index(this)
console.log(m);
// 获取点击表的tbody进行 展开/隐藏 操作
var sn = document.getElementsByTagName('tbody')[m]
if(sn.style.display == "none") {
document.getElementsByTagName('tbody')[m].style.display = ""
} else if(sn.style.display == "") {
document.getElementsByTagName('tbody')[m].style.display = "none"
}
})
</script>
