Переключение строк таблицы внутри таблицы HTML

Question

Я создал базовую таблицу с использованием HTML. В этой таблице есть вложенные элементы, которые должны открываться индивидуально, когда вы нажимаете на каждый назначенный переключатель. Поэтому, когда вы нажимаете на значок «+», он открывает подменю, содержащее множество строк таблицы, каждый из которых имеет значок «Шаг», который открывает страницу, на которой будет отображаться информационная страница.

Что происходит в данный момент, так это то, что когда я нажимаю «+», он показывает только первый пункт подменю, а не второй.

Что я хочу сделать, когда я нажимаю значок «+», он открывает все пункты подменю внутри и отсюда, я могу открыть каждый отдельный элемент, щелкнув соответствующий значок «Шаг».

Может ли кто-нибудь рассказать мне, как изменить Javascript/HTML, чтобы это произошло?

Я прикрепил ниже код ...

<table> 
<tr> 
    <td></td> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    <td>Column 3</td> 
    <td>Column 4</td> 
    <td>Column 4</td> 
    <td>Column 5</td> 
    <td>Column 6</td> 
    <td>Column 7</td> 
</tr> 
<tr> 
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td> 
    <td>Company</td> 
    <td>47</td> 
    <td>123</td> 
    <td>22/10</td> 
    <td>***</td> 
    <td></td> 
    <td></td> 
     <td></td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td> 
    <td>List</td> 
    <td>120</td> 
    <td>105</td> 
    <td>22/10</td> 
    <td>***</td> 
    <td>23/6/2015</td> 
    <td>14.95%</td> 
    <td>30%</td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td> 
     <p>HELLO</p> 
    </td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td> 
    <td>List</td> 
    <td>120</td> 
    <td>105</td> 
    <td>22/10</td> 
    <td>***</td> 
    <td>23/6/2015</td> 
    <td>14.95%</td> 
    <td>30%</td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td> 
     <p>HELLO</p> 
    </td> 
</tr> 

<tr> 
    <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td> 
    <td>Company</td> 
    <td>48</td> 
    <td>156</td> 
    <td>22/10</td> 
    <td>***</td> 
    <td></td> 
    <td></td> 
     <td></td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td> 
    <td>List</td> 
    <td>156</td> 
    <td>256</td> 
    <td>22/10</td> 
    <td>***</td> 
    <td>23/6/2015</td> 
    <td>16.95%</td> 
    <td>30%</td> 
</tr> 
<tr class="cat1" style="display:none"> 
    <td> 
     <p>HELLO</p> 
    </td> 
</tr> 

Также я приложил JSFiddle, так что вы можете увидеть, что я имею в виду

Любая помощь будет принята с благодарностью, у меня есть в течение некоторого времени боролся с этой проблемой.

Большое спасибо

Answer 1

Попробовать это

$(document).ready(function(){ 
$(".toggler").click(function(e){ 
    e.preventDefault(); 
    $(this).toggleClass("expand"); 
    var className = 'cat'+$(this).attr('data-prod-cat'); 
    var $current= $(this).closest('tr').next(); 
    while($current.hasClass(className)){ 
     if($(this).hasClass("expand")){ 
      $current.show(); 
      $current = $current.next().next(); 
     } 
     else{ 
      $current.hide(); 
      $current = $current.next(); 
     } 

    } 

}); 
    $(".pitcher").click(function(e){ 
    e.preventDefault(); 
    var className = 'cat'+$(this).attr('data-prod-cat'); 
    $(this).closest('tr').next().toggle(); 
    }); 
}); 

JS скрипку: https://jsfiddle.net/w6dvyshj/8/

Answer 2

Вы должны использовать метод nextAll вместо следующего:

$(document).ready(function(){ 
    $(".toggler").click(function(e){ 
     e.preventDefault(); 
     $(this).closest('tr').nextAll('.cat'+$(this).attr('data-prod-cat')).toggle(); 
    }); 
}); 

FIDDLE