隐藏点击表上的行

Posted 2023-03-06

【中文标题】隐藏点击表上的行

【英文标题】：Hide Rows on Click Table

【发布时间】：2017-10-17 15:19:52

【问题描述】：

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

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

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

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

非常感谢任何帮助。

【问题讨论】：

你能发布你的html吗？通过浏览器上的view page source，以便我们可以使用示例？

【参考方案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会显示出来。干杯兄弟。

【讨论】：

我有想过这个，问题是它只会隐藏一组td，不能包裹TR。所以我需要将所有发票信息放在一行中才能使此方法起作用？