Question

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

我希望本指南可以提供帮助。

显示特定行的SQL数据onclick

2 个答案: