jQuery的切換下一行表

Question

我不知道爲什麼這是不工作...

HTML

<table> 
<tr> 
    <th>Name</th> 
    <th>Options</th> 
</tr> 
<?php // loop over items 
while ($row = mysql_fetch_assoc($qry)){ ?> 
    <tr> 
    <td><?=$row['name'];?></td> 
    <td<a href="#" class="trigger">Detail</a></td> 
    </tr> 
    <tr> 
    <td colspan="100%" class="details"> 
    stuff 
    </td> 
    </tr> 
    <?php 
} ?> 
</table> 

然後jQuery的我使用的是...

$(document).ready(function() { 
    $('.trigger').click(function() { 
    $(this).parents("table").siblings(".details").slideToggle(); 
    // also tried this... 
    // $(this).parents("table").nextAll(".details").slideToggle(); 
    return false; 
    }); 
}); 

我試過將細節類移動到TR。我想要的是當有人點擊「詳細」鏈接時，以下TR應該切換。我已在頂部表上放置了一個ID，並提醒了父母的attr（'id'），這是有效的。將「.siblings」改爲「.find」切換全部。

感謝您的任何幫助。

Answer 1

你的html格式不正確 和你的jquery沒有做選擇正確的項目...你去了表元素，然後嘗試一會兒，但沒有結果。

試試這個網站：

<table> 
<tr> 
    <th>Name</th> 
    <th>Options</th> 
</tr> 
<?php // loop over items 
while ($row = mysql_fetch_assoc($qry)){ ?> 
    <tr> 
    <td><?=$row['name'];?></td> 
    <td><a href="#" class="trigger">Detail</a></td> 
    </tr> 
    <tr class="details"> 
    <td colspan="2"> 
    stuff 
    </td> 
    </tr> 
    <?php 
} ?> 
</table> 

與這個jQuery：

$(function(){ 
    $('.trigger').click(function() { 
    $(this).parents("tr").next().slideToggle(); 
    return false; 
    }); 
}); 

工作示例： http://jsfiddle.net/saelfaer/Z6MzS/

編輯 只是提什麼我改變

你有一個<td>開放標籤，它缺少了它的>，我也將class="details"移動到要顯示/隱藏的<tr>元素。

在jquery中，我改變了你的選擇器上表，選擇了.next()錶行（這實際上是需要顯示或隱藏的行，然後切換那個行）。

的改進可以使： 隱藏在第一

tr.details { 
    display: none; 
}