Display SQL data for a specific row onclick - php

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>

Answer 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

Answer 2

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.