How to show/hide table row with jquery in while loop

问题

So I have a table generated from database with while loop. Data is displayed in rows. Point is that there are "hidden" rows with data available only on click (like show details). Basically I want something like this: http://www.transfercar.co.nz/ - if you click on the table row more data appears below (in new row).

My code looks like this:

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
$display1=$display1+1;
    echo '
    <tr class="tablerow">
        <td>' . $row['id'] . '</td>
        <td><p class="state">' . $row['name'] . '</p></td>
        <td><p class="state">' . $row['surname'] . '</p></td>
        <td>' . $row['country'] . '</td>
        <td>' . $row['city'] . '</td>
        <td>' . $row['category'] . '</td>
    </tr>';
if($row['id']==$_GET['showrow'])
{
    echo '
    <tr class="subtable" style="display:none;">';
        echo '<td colspan="3" class="detalji"></td>
        <td align="left" colspan="3" class="detalji"></td>
        </tr>';}} // End of WHILE loop.
echo '</table>';

My jQuery looks like this:

/* Table row click */
$(".tablerow").click(function()
{
  $(".subtable").show();
}); 

$(".subtable").click(function()
{
  $(".subtable").hide();
});

Point is that once clicked all subtables show, naturally I only want the one below the clicked table row..

回答1:

Try this

$(".tablerow").click(function() {
    // Hideing all the tr with class subtable rows initially
    $('.subtable').hide();
    // Find the next tr which has class subclass in current context
    $(this).next('.subtable').show();
});

$(".subtable").click(function() {
    // Hide current row that has class subtable
    $(this).hide();
});

回答2:

I have managed to solve it using code like this:

$(".tablerow").click(function()
{
  $(this).next(".subtable").slideDown("slow");
}); 

$(".subtable").click(function()
{
  $(".subtable").hide();
});

sushanth reddy has been very helpful, thank you! I am not exactly sure why this code works and Sushanth is not. There is probably a typo somewhere, but anyway Susanth provided with correct answer and therefore i will edit his reply with correct code.

来源：https://stackoverflow.com/questions/12645088/how-to-show-hide-table-row-with-jquery-in-while-loop

标签

jquery

loops

while-loop

html-table

tablerow