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() function

Answer 2

在得到Fisherman和dotnetom的帮助后，我能够让它运转起来。这是它的样子：

表格

echo "<tbody>"; echo "<tr>"; echo "<td width='40' class='player'>  <a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>"; echo '<td width="250" class="name">'.$sound['name'].'   <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();
    });

希望这项工作

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

3 个答案: