Display only $(this) row of table data when button is clicked

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

Answer 2

After messing around with the help from Fisherman and dotnetom I was able to get it working. here is what it looks like:

Table:

    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 style='display:none;' height='100' colspan='6'></td>";
echo "</tr>";
echo "</tbody>";

J query:

$(".button").on('click', function(){
$(this).parents('tr').next('tr').find('td').toggle('display', function(i,v){return v=='none' ? 'inline' : 'none' });

});

Thanks! (the toggle animation effect looks dope)

Answer 3

Because you need to toggle only one row of the button so , you need to assign id for the button also for the row you want to toggle. In Your php file .

$i = 0;   
 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' data-index='$i' src='99cents.png'/></td>";
        echo "</tr>";
        echo "<tr id='row-$i'>";
        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>";
    $i++;
    }

See i assign a data-index to track next row id. now in your js file

$(".button").on('click', function(){
       $('#row-'+$(this).data('index')).toggle();
    });

Hope This work