Html5 - как свертываться и расширяться для сложных элементов таблицы

Привет, мне нужна функция расширения и свертывания для таблицы. Код, найденный в строке больше всего, для, а затем в js определяет функцию для этого tr-класса.

Но мой случай более сложный, как картина. Он будет расширяться после нажатия "Параметр 1" и отображает объединенную ячейку и 2 ячейки.

Итак, в этом случае, как я могу реализовать эту функцию? Спасибо заранее.

Прикрепленный файл представляет собой простой фрагмент таблицы для вашего теста:

https://jsfiddle.net/knspgwkq/

html для тестовой таблицы

<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1 </td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

$('.P1').click(function(){
  $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
  $(this).nextUntil('.P2').slideToggle(100, function(){
  });
});

Ответ 1

Как добавить пользовательский атрибут данных в ячейки, которые вы хотите контролировать? Пример Live https://jsfiddle.net/knspgwkq/7/

Ваш родитель будет удерживать data-collapsable-parent с некоторым значением ключа. И ваши дети, которые вы хотите скрыть/показать с родителем выше, будут содержать data-collapsable-child с тем же значением ключа, что и родительский.

И если вам нужны дополнительные коллапсирующие расширяющиеся элементы, проверьте этот пример Нажав Parameter 1, затем Sub parameter (2) вы откроете дополнительный элемент.

https://jsfiddle.net/knspgwkq/9/

$('[data-collapsable-parent]').click(function(){
  var child = $(this).attr("data-collapsable-parent");
  $('[data-collapsable-child="'+ child + '"]').toggle('slow');
});

 [data-collapsable-child] {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2" data-collapsable-parent="1"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td data-collapsable-child="1" rowspan="2">Sub level-1 </td>
    <td data-collapsable-child="1" >Sub parameter (1)</td>
  </tr>
  <tr>
    <td data-collapsable-child="1" >Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

Ответ 2

Вот идея: используйте два переключателя, чтобы получить эффект восходящего коллапса, и эффект уменьшения вниз (без изменения структуры таблицы).

// Basic toggle without animation
//$('.P1').on("click", function() {
//  $(this).closest("tr").nextUntil('.P2').toggle();
//});

// Better sliding toggle
$('.P1').on("click", function() {
  $trs = $(this).closest("tr").nextUntil('.P2');
  $trs.eq(1).find("td").eq(0).slideToggle(100, function() {
    $trs.eq(0).slideToggle(100);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P1">Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1</td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>