Переключение строк таблицы без конкретной ссылки

У меня есть таблица с некоторыми строками, это довольно трудно показать вам весь код, но я дам вам пример:Переключение строк таблицы без конкретной ссылки

<tr id="<?=$row['slug'];?>" class="gradeX <? if($row['parent_name']!=''){?>child<?}?>"> 
<td id="<?=$row['id'];?>" class="expand-parent"><? if($row['parent_name']==''){?>+<?}?></td> 
<td><span id="<?=$row['id'];?>" class="edit-title"><?=$row['title'];?></td> 
<td><span id="<?=$row['id'];?>" class="edit-slug"><?=$row['slug'];?></td> 
<td><span id="<?=$row['id'];?>" class="edit-parent"><? if($row['parent_name']){ ?><?=$row['parent_name'];?> (ID: <?=$row['parent'];?>)<? } ?></td> 
<td id="<?=$row['id'];?>" class="edit-uri"><?=$row['uri'];?></td> 
<td id="<?=$row['id'];?>" class="edit-perms"><?=$row['perms'];?></td> 
<td>  
<div class="toggle-button" data-toggleButton-style-enabled="success"> 
<input type="checkbox" class="toggle-perm" id="<?=$row['id'];?>"<?=$cl;?> /> 
</div> 
</td> 
</tr>

Это в цикле, и производит несколько сотен «родительских» строк и несколько тысяч «детских» строк.

У меня есть JQuery, который выглядит следующим образом:

$('.child').toggle(); 
      $('.expand-parent').click(function(){ 
       $(this).closest(".child").toggle(); 
      });

В основном то, что я пытаюсь сделать, это когда вы вызываете функцию .expand-parent щелчка, она будет переключать (шоу) дети, принадлежащие к родителю, который был щелкнул. Каким будет лучший способ рассказать jQuery, какие tr дети принадлежат каждому из родителей tr и соответственно переключаться?

РЕДАКТИРОВАТЬ

HTML Результат:

        <!-- Table row --> 
        <tr id="pp" class="gradeX "> 
         <td id="1" class="expand-parent">+</td> 
         <td><span id="1" class="edit-title">Prospector</td> 
         <td><span id="1" class="edit-slug">pp</td> 
         <td><span id="1" class="edit-parent"></td> 
         <td id="1" class="edit-uri"></td> 
         <td id="1" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="1" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="pp_data_providers" class="gradeX child"> 
         <td id="2" class="expand-parent"></td> 
         <td><span id="2" class="edit-title">Data Providers</td> 
         <td><span id="2" class="edit-slug">pp_data_providers</td> 
         <td><span id="2" class="edit-parent">Prospector (ID: 1)</td> 
         <td id="2" class="edit-uri">/plugins/plg_prospector/prospect_providers.php</td> 
         <td id="2" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="2" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="pp_provider_lists" class="gradeX child"> 
         <td id="3" class="expand-parent"></td> 
         <td><span id="3" class="edit-title">Provider Lists</td> 
         <td><span id="3" class="edit-slug">pp_provider_lists</td> 
         <td><span id="3" class="edit-parent">Prospector (ID: 1)</td> 
         <td id="3" class="edit-uri">/plugins/plg_prospector/prospect_lists.php</td> 
         <td id="3" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="3" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="pp_partners" class="gradeX child"> 
         <td id="4" class="expand-parent"></td> 
         <td><span id="4" class="edit-title">Partners</td> 
         <td><span id="4" class="edit-slug">pp_partners</td> 
         <td><span id="4" class="edit-parent">Prospector (ID: 1)</td> 
         <td id="4" class="edit-uri">/plugins/plg_prospector/prospect_partners.php</td> 
         <td id="4" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="4" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="pp_reporting" class="gradeX child"> 
         <td id="5" class="expand-parent"></td> 
         <td><span id="5" class="edit-title">Reporting</td> 
         <td><span id="5" class="edit-slug">pp_reporting</td> 
         <td><span id="5" class="edit-parent">Prospector (ID: 1)</td> 
         <td id="5" class="edit-uri"></td> 
         <td id="5" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="5" /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="pp_campaigns" class="gradeX child"> 
         <td id="6" class="expand-parent"></td> 
         <td><span id="6" class="edit-title">Campaigns</td> 
         <td><span id="6" class="edit-slug">pp_campaigns</td> 
         <td><span id="6" class="edit-parent">Prospector (ID: 1)</td> 
         <td id="6" class="edit-uri">/plugins/plg_prospector/prospect_campaigns.php</td> 
         <td id="6" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="6" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END --> 

             <!-- Table row --> 
        <tr id="cbm" class="gradeX "> 
         <td id="7" class="expand-parent">+</td> 
         <td><span id="7" class="edit-title">CBM</td> 
         <td><span id="7" class="edit-slug">cbm</td> 
         <td><span id="7" class="edit-parent"></td> 
         <td id="7" class="edit-uri"></td> 
         <td id="7" class="edit-perms"></td> 
         <td>  
          <div class="toggle-button" data-toggleButton-style-enabled="success"> 
           <input type="checkbox" class="toggle-perm" id="7" checked /> 
          </div> 
         </td> 
        </tr> 
        <!-- // Table row END -->

источник

2013-10-04 Hydra IO

Это может быть намного проще с вложенной структурой таблицы, а не с использованием классов для определения родительских/дочерних строк. Затем вы можете просто ссылаться на «таблицу», вложенную внутри 'td'. – David

Можете ли вы опубликовать некоторые из HTML, который является результатом PHP-кода? – Streamside

Отредактировано с помощью примера вывода HTML. –

В строках, которые имеют родителя Я хотел бы добавить атрибут, содержащий родительский идентификатор.

Пример:

<tr id="cbm" class="gradeX" data-parentid="1">

Тогда вы можете написать событие JQuery, как это:

var $this = $(this); 
var id = $this.attr('id'); 
$(this).parents('table').find('tr[data-parentid='+id+']').toggle();

Примечания: родители ('стол'), чтобы пересекающие к столу элемент находке (..) найдите все элементы tr с атрибутом data-parentid, установленным в id.

Нельзя иметь несколько элементов с одинаковым идентификатором, поэтому я бы избавился от них. Самый чистый способ - переместить его в элемент tr.

источник

2013-10-04 18:26:15 Streamside

Работал отлично. Спасибо! –

Переключение строк таблицы без конкретной ссылки

ответ

Смежные вопросы