单击按钮时仅显示$（this）表数据行

Question

I am working on a drop down option feature within a table that loads its data from a mysql database. When a user clicks a button that's within a row it displays table data that was previously hidden. It should only display the data in the row below it but instead it applies this to all rows in the table with class $(.options). The goal is to only apply this to the row under the row that contains .button. This is what I have so far:

CSS:

.options
{
display:none;   
}

MySql Table PHP):

while($sound=mysql_fetch_assoc($records)){
    echo "<tbody>";
    echo "<tr>";
    echo "<td width='40' class='player'>&nbsp;&nbsp;<a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>";
    echo '<td width="250" class="name">'.$sound['name'].'&nbsp;&nbsp;&nbsp;<span class="red date">'.$sound['date'].'</span></td>';
    echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>";
    echo "<td width='72' class='length'>".$sound['length']."</td>";
    echo "<td width='275' class='keywords'>".$sound['keywords']."</td>";
    echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>";
    echo "</tr>";
    echo "<tr>";
    echo "<td  height='100' class='options' colspan='1'></td>";
    echo "<td class='options' colspan='1'>mp3</td>";
    echo "<td class='options' colspan='2'>wav</td>";
    echo "<td class='options' colspan='2'>tracked out</td>";
    echo "</tr>";
    echo "</tbody>";

Jquery Function:

    $(".button").on('click', function(){
        $('.options').css('display', function(i,v){return v=='none' ? 'inline' : 'none' });
    });

Answer 1

You can use such code in your jQuery function:

$(".button").on('click', function(){
    // use $(this) to get the element that was clicked. In this case it will be img element
    $(this)
       // find a parent of type tr, that is a row
       .parents('tr')
       // find the next row
       .next('tr')
       // manipulate the item
       .css('display', function(i,v){return v=='none' ? 'inline' : 'none' });
});

Or since you are doing only show / hide manipulation, instead of your .css() function you can use toggle() function