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

Question

我正在处理从MySQL数据库加载其数据的表中的下拉选项功能。 当用户单击行中的按钮时，它将显示以前隐藏的表数据。 它仅应在其下面的行中显示数据，而应将其应用于表中具有类$（。options）的所有行。 目标是仅将其应用于包含.button的行下的行。 这是我到目前为止的内容：

CSS：

.options
{
display:none;   
}

MySql表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函数：

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

Answer 1

您可以在jQuery函数中使用以下代码：

$(".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' });
});

或者因为您只执行显示/隐藏操作，而不是.css()函数，所以可以使用toggle()函数

Answer 2

在渔民和dotnetom的帮助下弄乱之后，我得以使其工作。 这是它的样子：

表：

    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查询：

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

}）;

谢谢！ （切换动画效果看起来像涂料）

Answer 3

由于您只需要切换按钮的一行，因此，您还需要为要切换的行分配按钮ID。 在您的php文件中。

$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++;
    }

请参阅我分配data-index以跟踪下一行ID。 现在在您的js文件中

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

希望这项工作