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 に答える