我有一些行的表,這是有點難以向你展示所有的代碼,但我會給你一個例子:切換錶行
<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
家長的最好方法並相應地切換?
EDIT
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 -->
使用嵌套表結構而不是使用類定義父/子行可能會更容易。然後你可以引用嵌套在'td'中的'table'。 – David
你可以發佈一些HTML代碼是從PHP代碼的輸出嗎? – Streamside
使用示例HTML輸出進行編輯。 –