隱藏Click Table上的行

Question

我正在嘗試創建一個具有單獨行的表格，其中包含各個發票的摘要（例如，發票日期，發票總額，狀態等）。

我希望能夠點擊該行並向下展開並向我顯示與該發票相關的詳細信息，但是我無法解決我需要隔離行然后展開新的問題。它下面的信息？

請記住<div>不能包圍<tr>元素，所以我無法隱藏<div>和<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>

任何幫助是極大的贊賞。

Answer 1

試試這個模式兄弟..

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

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

自動隱藏td。當你點擊tr時，td將顯示。歡呼兄弟。