2017-05-18 7 views
1

個々の請求書の概要(例:請求書日付、請求書の合計、ステータスなど)を含む個別の行を持つテーブルを作成しようとしています。クリックテーブルの行を非表示

行をクリックして拡大表示し、その請求書に関連する詳細情報を表示したいと思っていますが、行と行を分離するために必要な問題を解決できませんでした。その下に新しい情報を展開しますか?私は< div要素を隠すことができないので、<のdiv>が< TR>要素を囲むことはできません念頭に置い

キーピング>と< TBODY>は、テーブル全体の体だけではなく、行のセットを包含することを望んでいます。

私のPHPとHTMLのスキル私はまともですが、私のjavascriptに関する知識はありません。

<table> 
    <tr><th colspan='6'><h2>Billing Details</h2></tr><tr><td>Invoice ID</td><td>Invoice Date</td><td>Due Date</td><td>Date Paid</td><td>Total</td><td>Status</td> 
<?php 
for ($counter = 0; $counter < $invoicesData['numreturned']; $counter++) 
{ 
echo "<tr><td>WellConn - " . $invoicesData['invoices']['invoice'][$counter]['id'] . "</td>"; 
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['date'] . "</td>"; 
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['duedate'] . "</td>"; 
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['datepaid'] . "</td>"; 
echo "<td>$" . $invoicesData['invoices']['invoice'][$counter]['total'] . "</td>"; 
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['status'] . "</td></tr>"; 
} 
?> </table> 

ご協力いただきまして誠にありがとうございます。

+0

あなたのHTMLを投稿できますか?ブラウザで 'view page source'経由で作業する例がありますか? –

答えて

0

あなたは、TR、TDの意志show.Cheers仲間をクリックして自動的にtd's.Whenを隠す

<tr onclick="myFunction()"> 
<td id="td1" hidden> <?php echo  ?> </td> 
</tr> 

<script> 
function myFunction(){ 
document.getElementById("td1").style.display = "table-row"; 
} 
</script> 

...このパターン仲間を試してみてください。

+0

私はこれについて考えていましたが、この問題は単一のtdを隠すだけで、TRをラップすることはできません。だから私は、このメソッドを動作させるには、すべてのインボイス情報を1行に収める必要がありますか? – WellConnectedIT