onclick 显示特定行的 SQL 数据

Question

我目前有 2 张桌子，顶部和底部。对于顶部，会有我从我的 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

Answer 2

您几乎完成了这项工作，但您似乎正试图隐藏/显示所有整个表格。所以你需要隐藏/只显示特定的行。

而不是

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

应该更新为

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

你的 HTML 应该是

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

希望本指南对您有所帮助。