使用jquery显示/隐藏div值

时间:2016-11-30 12:06:09

标签: php jquery html

我有两个表,它们使用名为 invoice_no 的公共列相互关联。我想要的是这样的事情: -

首先显示来自一个表格的数据 - > image 1

然后从第二个表格显示数据这样当用户点击VIEW按钮时 - >> image 2

如何通过使用jquery在表格的每一行中单击按钮VIEW来切换第二个表中的数据,而不是一次性显示所有数据。

这是我一直用来查看所有数据的代码: -

<?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>";
?>

感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

您需要使用唯一ID,在这种情况下,您可以使用invoice_no字段。如果您为用于显示字段的字段定义该唯一ID,则可以通过1显示它们。您可以在下面看到一个简单的示例,此示例使用的是智能变量。

<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>