我有一个包含一个标题和列的表格,我通过以下代码根据标题点击展开/折叠:
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
我的表格如下:
我需要的是。当我首先单击时,它应该折叠并仅显示第一列,这意味着带有 data1 的列应该隐藏,如下所示:
它应该显示 + 按钮,当我再次点击时它应该回到之前的状态。
请注意 fiddle :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>
关于javascript - 隐藏展开/折叠表 jQuery 上第一列以外的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54538310/