隐藏列除了在展开/折叠表jQuery的第一列

问题描述 投票:2回答:1

我有一个标题和列的表,和我展开/折叠基于下面的代码头点击:

$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);

我的表如下:

我需要的是。当我点击第一个,那么它应该崩溃,显示平均与数据1人列应如下只隐藏第一列:

它应显示+按钮,当我再次点击它应该回到以前的状态。

请注意小提琴:Fiddle

javascript jquery html-table
1个回答
1
投票

采用:

$(this).toggleClass('expand').next('tr').find('td').not('td:first')

为了排除第td


Use this if you have more than one row:
$(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>
© www.soinside.com 2019 - 2024. All rights reserved.