jqueryを使用してdiv値を表示/非表示

Question

invoice_noという共通の列を使用して互いに関連する2つのテーブルがあります。私がしたいことは、このようなものです： - >image 1

最初like-で一つのテーブルからデータを表示するようにし、ユーザーがクリックするボタンlike-を表示したときに第二のテーブルからこのようなデータを表示するために

>ここで私が使用してきた私のコードですどのように私は、テーブルの各列にボタンVIEWのクリック時に第二のテーブルからデータを切り替えることができないjqueryのを使用することにより、一度にすべてを表示...

image 2

一度にすべてのデータを表示するには： -

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

あなたの助けに感謝:)

Answer 1

あなたはinvoice_noフィールドを使用することができ、この場合には、固有のIDと連携する必要があります。フィールドを表示するために使用しているフィールドに一意のIDを定義すると、フィールドを表示することができます。以下の簡単な例を見ることができます。この例ではスマート変数を使用しています。

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