顯示特定行的SQL數據onclick

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> 

我希望本指南能夠幫助。