CODEWITHSUNDEEP
phpjquerysqlhtml-table
Wolf06
Wolf06

Reputation: 21

Display SQL data for a specific row onclick

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>

Upvotes: 2

Views: 2613

Answers (2)

M Kaweepatt Churcharoen
M Kaweepatt Churcharoen

Reputation: 216

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.

Upvotes: 1

Aleksandrs
Aleksandrs

Reputation: 1509

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

Upvotes: 1

Related Questions