Php 使用jquery显示/隐藏div值

我有两个表，它们使用一个名为invoice_no的公共列相互关联。我想要的是这样的：-

首先显示一个表中的数据，如->

然后，当用户单击查看按钮时，从第二个表中显示这样的数据，如->

如何使用jquery在表的每一行中单击按钮视图时切换第二个表中的数据，而不是一次显示所有数据

下面是我用来一次查看所有数据的代码：-

<?php

$mysqli= new mysqli("localhost","root","","store_records");
if($mysqli->connect_error)
die("Database connection failed ".$mysqli->connect_error);

$query_details = "select DATE_FORMAT(date, '%d-%m-%Y') as date, ID, invoice_no, balance, sub_total, vat_tax, grand_total from bill_details ORDER BY DATE_FORMAT(date, '%m-%d-%Y') DESC";
$result_details = $mysqli->query($query_details);
echo"<table id='products_table' border='1'>";
echo "<tr><th>Date</th><th>Invoice No</th><th>Balance</th><th>Sub Total</th><th>ADD V.A.T Tax</th><th>Grand Total</th></tr>";
while($row_details = $result_details->fetch_assoc())
{

echo "<tr><td>".$row_details['date']."</td><td>".$row_details['invoice_no']."</td><td>".$row_details['balance']."</td><td>".$row_details['sub_total']."</td><td>".$row_details['vat_tax']."</td><td>".$row_details['grand_total']."</td><td><input type='button' id='viewdetails' value='View'></td></tr>";

$query_records = "select * from bill_records where invoice_no='".$row_details['invoice_no']."'";
$result_records = $mysqli->query($query_records);
echo "<td colspan='15'>";
echo "<table border='1' width='100%'>";
echo "<tr><th>Item Name</th><th>Quantity</th><th>Pack</th><th>Batch</th><th>Expiry</th><th>M.R.P</th><th>Rate</th><th>VAT</th><th>DIS.</th><th>Amount</th></tr>";
while($row_records = $result_records->fetch_assoc())
{

echo "<tr><td>".$row_records['item_name']."</td><td>".$row_records['qty']."</td><td>".$row_records['pack']."</td><td>".$row_records['batch']."</td><td>".$row_records['expiry']."</td><td>".$row_records['mrp']."</td><td>".$row_records['rate']."</td><td>".$row_records['vat']."</td><td>".$row_records['discount']."</td><td>".$row_records['amount']."</td></tr>";

}
echo "</table>";
echo "</td>";
echo"</tr>";
}
echo "</table>";
?>

---

感谢您的帮助：

您需要使用唯一的ID，在这种情况下，您可以使用“发票号”字段。如果为用于显示字段的字段定义唯一id，则可以逐个显示。您可以看到下面的一个简单示例，该示例使用smarty变量

<style>
.hide {
    display: none;
}
</style>

{foreach $items as $item}
    <div class="block">
        <button id="button-{$item.id}">Show Field</button>
        <div class="hide" id="block-{$item.id}">
            Content {$item.id}
        </div>
    </div>
{/foreach}

<script type="text/javascript">
    $('[id^="button-"]').click(function () {
        var id_parts = $(this).attr('id').split('-');
        $('#block-' + id_parts[1]).fadeIn();
    });
</script>

---

你目前有什么问题？您尝试过什么？我尝试过将第二个表的值显示在一个div标记中，如$document.readyfunction{$product_details[]隐藏；$viewdetails.clickfunction{$this.prevproduct_details[]切换；但它只适用于一行。。