How to show hidden table row on click of existing html table row?

Question

I have a PHP script that uses a while loop to generate an HTML table.

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>';  

Here is a screen capture showing a single row of the generated table:

. My question is: How can I make it so when the user clicks on a table row, a description row becomes visible beneath the row clicked. Special notes *this is within a PHP script, so the Javascript will likely need to be embedded in an echo statement.

The row which needs to be toggled is the tr with id = description on the third line of the while loop.

I have looked through similar questions, but could not get a toggled table row working for my table.

(Possible difficulties: table created with php script, table generated using while loops)

UPDATE

Current Javascript code:

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

The script is somewhat functional, however upon clicking the table a second time, the description does not toggle to invisible. Also, the click event is tracking the entire table, not individual rows; meaning, anywhere you click on the table will render the first description visible. I want to make it so when you click on a specific row, that row's description toggles between visible / hidden.

Answer 1

First of all, your code is invalid in some way, as you wrote something like

id = description

inside a foreach loop. What if there is more than one iteration of the loop? There will be more than one HTML element with the same id and it's unacceptable (not only semantically invalid, but also making elements harder to access with javascript). Please consider using class attribute instead of an id .

You should also note that there is no connection between PHP and Javascript. The first one is just a server-side language, which you use to generate some HTML code. The latter is a client-side language, which you will most likely insert somewhere inside a HTML document - it doesn't matter if the document is generated using PHP or not.

And finally, the answer for your question is a JS code:

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

But before that you should use CSS to hide this row:

#description {
  display: none;
}

Answer 2

Okay, so here is the answer for your updated question. I will use JQuery as it will make it much more clean and simple. You have to add this library to your document just before this new script (old one isn't correct), which is:

$(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(); 
  });
});

Also change your PHP code, so that every odd row has class clickable :

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>'; 

Hope that it does work for you :) .

Answer 3

Change it

.... .style.display = "table-row";

Change to

.... .style.display = "block";

style.display = "none"; hide item

style.display = "block"; show item

This is example http://www.w3schools.com/jsref/prop_style_display.asp