隐藏点击表

时间:2017-05-18 01:17:23

标签: javascript php html css html-table

我试图创建一个包含单独行的表格,其中包含各个发票的摘要(例如,发票日期,发票总额,状态等)。

我希望能够点击该行并向下展开并向我显示与该发票相关的详细信息,但是我还没有能够解决我需要隔离行的问题然后展开它下面的新信息?

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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

尝试这种模式兄弟。

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

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

自动隐藏td&#39; s。点击tr时,td将显示。欢呼兄弟。