javascript - 如何在单击现有 html 表格行时显示隐藏的表格行？

Question

我有一个 PHP 脚本，它使用 while 循环来生成 HTML 表。

echo'<table id="rideTable" style="width:100%; cursor:pointer;">

<tr>
<th>NAME</th>
<th>ARRIVAL CITY</th>
<th>DEPARTURE CITY</th>
<th>AVALIABLE SPACE</th>
<th>DEPARTURE Date</th>
<th>Price</th>

</tr>';

 while($row = mysqli_fetch_array($query)){
    $fburl = $row['fb_url'];
        echo '<tr><td><a href='.$fburl.'>'.$row['Name'].'</a></td><td>'.$row['ArriveCity'].'</td><td>'.$row['DepartCity'].'</td><td>'.$row['Space'].'</td><td>'.$row['Date'].'</td><td>$'.$row['Price'].'</td></tr>
        <tr id = "description"><td colspan="6"><p>Detailed Ride Description Goes Here</p></td></tr>';   
}
echo'</table>';  

这是显示生成表的单行的屏幕截图:

。我的问题是:当用户单击表行时，如何才能使描述行在单击的行下方可见。特别说明 *这是在 PHP 脚本中，因此 Javascript 可能需要嵌入到 echo 语句中。

需要切换的行是 while 循环第三行中 id = description 的 tr。

我已经查看了类似的问题，但无法让切换的表行适用于我的表。

(可能的困难:使用php脚本创建的表，使用while循环生成的表)

更新

当前 JavaScript 代码:

<script>
 document.addEventListener("DOMContentLoaded", function(event) { 
 document.querySelector("#rideTable").onclick = function() {
 document.querySelector(".description").style.display = "table-row";
 };
 });
</script>

该脚本具有一定的功能，但是第二次单击该表时，描述不会切换为不可见。此外，单击事件跟踪整个表，而不是单个行；这意味着，您单击表格的任何位置都会使第一个描述可见。我希望当您单击特定行时，该行的描述会在可见/隐藏之间切换。

Answer 1

首先，您的代码在某种程度上是无效的，因为您编写了类似的内容

id = description

在foreach循环内。如果循环迭代不止一次怎么办？将会有多个 一个 HTML 元素具有相同的 id，这是 Not Acceptable (不仅在语义上无效，而且还使元素更难以使用 javascript 访问)。请考虑使用class属性而不是id。

您还应该注意，PHP 和 Javascript 之间没有任何联系。第一个只是一种服务器端语言，您可以用它来生成一些 HTML 代码。后者是一种客户端语言，您很可能会将其插入 HTML 文档中的某个位置 - 无论该文档是否使用 PHP 生成，都没有关系。

最后，你的问题的答案是 JS 代码:

document.querySelector("#rideTable").onclick = function() {
  document.querySelector("#description").style.display = "table-row";
}

但在此之前你应该使用CSS隐藏这一行:

#description {
  display: none;
}