Скрыть столбцы, кроме первого столбца в развернутой / свернутой таблице jQuery - PullRequest
Новая
       6

Скрыть столбцы, кроме первого столбца в развернутой / свернутой таблице jQuery

0 голосов
/ 05 февраля 2019

У меня есть таблица с одним заголовком и столбцами, и я раскрываюсь / разворачиваюсь на основе щелчка заголовка по приведенному ниже коду: 

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

Моя таблица ниже:

Table

Что мне нужно.Когда я щелкаю первым, он должен свернуться и показать только первый столбец, который означает, что столбец с данными1 должен скрываться другими, как показано ниже:

After collapse

И это должно показать + и когда я нажму еще раз, он должен вернуться в предыдущее состояние.

Обратите внимание на скрипку: Скрипка

1 Ответ

0 голосов
/ 05 февраля 2019

Использование: 

$(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>
...