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

Question

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

0

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

<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 щелчка .expand-parent click, она будет переключать (показывать) дочерние .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 -->

Hydra IO 04 окт. 2013, в 21:03

Источник

0

Это может быть намного проще с помощью структуры вложенных таблиц вместо использования классов для определения родительских / дочерних строк. Тогда вы можете просто ссылаться на table которая вложена в td .
David 04 окт. 2013, в 18:10
1

Можете ли вы опубликовать часть HTML, который является выходом из кода PHP?
Streamside 04 окт. 2013, в 18:10
0

Отредактировано на примере вывода HTML.
Hydra IO 04 окт. 2013, в 18:17

Показать ещё 1 комментарий

Теги:

php

jquery

1 ответ

Ещё вопросы

Это может быть намного проще с помощью структуры вложенных таблиц вместо использования классов для определения родительских / дочерних строк. Тогда вы можете просто ссылаться на table которая вложена в td .
Можете ли вы опубликовать часть HTML, который является выходом из кода PHP?
Отредактировано на примере вывода HTML.

Streamside · Accepted Answer · 2013-10-04T16-05-00.000Z

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

Пример:

<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();

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

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