我有一个标题和列的表,和我展开/折叠基于下面的代码头点击:
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
我的表如下:
我需要的是。当我点击第一个,那么它应该崩溃,显示平均与数据1人列应如下只隐藏第一列:
它应显示+按钮,当我再次点击它应该回到以前的状态。
请注意小提琴:Fiddle
采用:
$(this).toggleClass('expand').next('tr').find('td').not('td:first')
为了排除第td
。
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
$('.header').click(function() {
$(this).toggleClass('expand').nextAll('tr').find('td').not('td:first-child').slideToggle(100);
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
tr.header {
cursor: pointer;
}
.header .sign:after {
content: "+";
display: inline-block;
}
.header.expand .sign:after {
content: "-";
}
<table border="0">
<tr class="header expand">
<th colspan="4">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>