隐藏点击表上的行

Question

我正在尝试创建一个表格，其中包含各个行以及各个发票的摘要（例如发票日期、发票总计、状态等）。

我希望能够单击该行并使其向下展开并向我显示与该发票相关的详细信息，但是我无法解决我需要隔离该行然后展开它下面的新信息？

请记住 不能围绕 元素，因此我无法隐藏 并且 希望包含整个表格主体，而不仅仅是一组行。

我的 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会显示出来。干杯兄弟。