php - onclick 显示特定行的 SQL 数据

Question

我目前有两张 table ，顶部和底部。对于顶部，将有我从 SQL 数据库调用的数据行。至于底部，数据与顶部表来自同一数据库，但显示不同的字段。这些字段都位于我的 SQL 数据库的同一行中。

基本上，单击顶部表格上的任何行后，底部表格将显示更多信息，这些信息也在 SQL 数据库的同一行中。我不确定如何专门显示某一行的数据，目前，当我单击顶部表格上的任何行时，它会显示 SQL 中的所有行。

表格代码:

<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>

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

如果我理解正确，这段代码将对您有所帮助:

$(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');
    });
}); 

工作示例:jsfiddle