2

我目前有 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>
4

2 回答 2

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

于 2012-11-15T08:07:31.417 回答
1

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

代替

$('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>

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

于 2012-11-15T08:17:55.167 回答