如何在点击现有的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>

该脚本有些功能，但是第二次单击该表时，描述不会切换为不可见。此外，click事件跟踪整个表，而不是单个行;这意味着，只要您点击表格，任何地方都会显示第一个描述。我希望当你点击一个特定的行时，该行的描述在可见/隐藏之间切换。

Answer 1

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

的内容

id = description

在 foreach 循环中。如果循环有多次迭代怎么办？将有超过一个 HTML元素具有相同的ID并且它是不可接受的（不仅在语义上无效，而且还使得使用javascript更难以访问元素）。请考虑使用类属性而不是 id 。

您还应注意PHP和Javascript之间没有任何关联。第一个是服务器端语言，用于生成一些HTML代码。后者是一种客户端语言，您很可能会在HTML文档中的某处插入 - 如果文档是使用PHP生成的，则无关紧要。

最后，您的问题的答案是JS代码：

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

但在此之前你应该用CSS来隐藏这一行：

#description {
  display: none;
}

Answer 2

好的，所以这是您更新的问题的答案。我将使用JQuery，因为它将使它更干净和简单。您必须在此新脚本（旧的脚本不正确）之前将此库添加到您的文档中，即：

$(function() { // we make sure that document is ready
  $("#rideTable .clickable").click( function() { // and once the odd row (.clickable) is clicked
    // we get the index of the row
    var index = $("#rideTable .clickable").index(this); 

    // and using this index we get the row with description (.description) and toggle it.
    $("#rideTable .description").eq(index).toggle(); 
  });
});

同时更改您的PHP代码，以便每个奇数行都有可点击类：

echo '<tr class="clickable"><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 class="description"><td colspan="6"><p>Detailed Ride Description Goes Here</p></td></tr>'; 

希望它对你有用:)。

Answer 3

改变它

....  .style.display =＆＃34; table-row＆＃34 ;;

更改为

....  .style.display =＆＃34; block＆＃34 ;;

style.display =＆＃34; none＆＃34 ;;隐藏项目

style.display =＆＃34; block＆＃34 ;;显示项目

这是一个例子 http://www.w3schools.com/jsref/prop_style_display.asp