Display SQL data for a specific row onclick

Question

I currently have 2 tables, top and bottom. For the top, there would be rows of data I had called out from my SQL database. As for the bottom, the data is from the same database as the top table, but displaying different fields. The fields are all in the same row in my SQL database.

Basically, upon click on any row on the top table, the bottom table will show more information which is also within the same row in the SQL database. I'm not sure how to display data specifically for a certain row, for now, when I click on any row on the top table, it displays all the rows in the SQL.

Code for the tables:

<table id="table_id">
<thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while ($row = mysql_fetch_array($results)) {
                    ?>
                    <tr data-details="c01" class="itemDetails">
                        <td><?=$row['name']?></td>
                        <td><?=$row['address']?></td>
                    </tr>
                    <?php
                }
                ?>
            </tbody>
</table>
</div>
<br /><br />    
<div>
    <table border=1 id="c01" class="aside hidden">
                <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while ($row = mysql_fetch_array($results2)) {
                    ?>
                    <tr>
                        <td><?=$row['product']?></td>
                        <td><?=$row['quantity']?></td>
                        <td><?=$row['price']?></td>
                    </tr>
                    <?php
                }
                ?>
            </tbody>
        </table>

Code for Jquery:

<script>
$(document).ready(function () {
$('table.hidden').hide();
$('tr.itemDetails').click(function() {
    var id = $(this).data('details');
    $('table.hidden').hide();
    $('#'+id).show();
});
}); 
</script>

Aleksandrs · Accepted Answer · 2012-11-15 08:07:31Z

1

If I understood correctly, this code will help you:


$(function() {
    $('table.hidden').css('display','none');
    $('tr.itemDetails').click(function() {
        var index = $(this).index();
        $('table.hidden').css('display', 'block');
        $('table.hidden tr').css('display', 'none');
        $('table.hidden tr:first-child').css('display','table-row');
        $('table.hidden tr:nth-child(' + (index + 1) + ')').css('display','table-row');
    });
});

working example: jsfiddle

answered Nov 15, 2012 at 8:07

Aleksandrs

1,4991 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wolf06 Over a year ago

Hi, thanks for the reply! I got this to work, but the first row still remains displayed when I click on the second or third row. The subsequent rows will appear just below the first row, but they won't remain there unlike the first.

Aleksandrs Over a year ago

If I understood you correctly, you don't want that first row is shown? then remove this $('table.hidden tr:first-child').css('display','table-row'); line of code.

M Kaweepatt Churcharoen · Accepted Answer · 2012-12-18 12:34:38Z

1

You almost done on this but it seems that you are trying to hide / show all entire table. So you need to hide / show only specific row instead.

instead of

$('table.hidden').hide();
$('#'+id).show();

It should be updated to

$('table.hidden tr').hide();
$('table.hidden tr #'+id).show();

And your HTML should be

            <tbody>
                <?php
                while ($row = mysql_fetch_array($results2)) {
                ?>
                    <tr id="<?=$row['id']?>">
                        <td><?=$row['product']?></td>
                        <td><?=$row['quantity']?></td>
                        <td><?=$row['price']?></td>
                    </tr>
                <?php
                }
                ?>
            </tbody>

I hope this guide could help.

edited Dec 18, 2012 at 12:34

answered Nov 15, 2012 at 8:17

M Kaweepatt Churcharoen

2162 silver badges7 bronze badges

1 Comment

Wolf06 Over a year ago

Hi, I tried this, but, nothing seems to appear when I click on the row, are there other areas that I'm supposed to change? Thanks!! =)

Collectives™ on Stack Overflow

Display SQL data for a specific row onclick

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related