Display extra info upon clicking a row in a table

Question

I essentially have a table with rows and upon clicking a row, I would like a popUp box to appear. I have the div/HTML code for it. However, I am not sure how to implement the backend code of it.

1.) User clicks row 2.) It gets extra info from that row: For example, the row is only displaying $transactionID and $transactionAmount. Then the user clicks a row, a box pops up displaying the $transactionID, $transactionAmount, $transactionDate and $reference

How do I go about doing this? I am completely confused and have attempted to look everywhere to find a solution but can't seem to find any similar examples

 document.addEventListener("DOMContentLoaded", () =>{ const rows = document.querySelectorAll("tr[data-href]"); rows.forEach(row => { row.addEventListener("click", () =>{ // Not sure what to do here }) }) })

 .transfers table{ width: 651px; margin: 450px auto; border-collapse: collapse; }.transfers tr{ border-bottom: 1px solid #cbcbcb; }.transfers th{ font-family: "Montserrat", sans-serif; }.transfers th, td{ border: none; height: 30px; padding: 3px; font-size: 20px; }.transfers.id{ text-align: left; }.transfers.amount{ text-align: right; } td{width:217px;}

 <div class="transfers"> <table> <thead> <tr> <th class="id">ID</th> <th class="amount">Amount</th> </tr> </thead> <tbody> <?php /* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */ foreach ($transactionList as $value){ $transactionID = $value['transactionID']; $transactionAmount = $value['amount']; $transactionDate = $value['transactionDate']; $reference = $value['reference']; echo "<tr data-href='$value'>"; echo "<td style='background-color:$colour'>$transactionID</td>"; echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>"; echo "</tr>"; } </tbody> </table> </div>

This was my approach but it doesn't work correctly: It won't actually update the values when clicked. Upon clicking a row, it will constantly display the same values from the first row of the table

 function displayTransaction() { var x = document.getElementById("transactionBox"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 .transfers table{ width: 651px; margin: 450px auto; border-collapse: collapse; }.transfers tr{ border-bottom: 1px solid #cbcbcb; }.transfers th{ font-family: "Montserrat", sans-serif; }.transfers th, td{ border: none; height: 30px; padding: 3px; font-size: 20px; }.transfers.id{ text-align: left; }.transfers.amount{ text-align: right; } td{width:217px;} #transactionBox{ position: relative; display: none; overflow: hidden; } transactionBox_class{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.8); transition: opacity 500ms; opacity: 0; }.wrapper{ margin: 150px auto; padding: 20px; background: #e7e7e7; border-radius: 5px; width: 15%; position: relative; transition: all 5s ease-in-out; }.wrapper h2{ margin-top: 0; color: #333; }.wrapper.close{ position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }.wrapper.content{ max-height: 30%; overflow: auto; }.container{ border-radius: 5px; background-color: #e7e7e7; padding: 20px 0; } form label{ text-transform: uppercase; font-weight: 500; letter-spacing: 3px; }.container p{ width: 50%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; }

 <div class="transfers"> <table> <thead> <tr> <th class="id">ID</th> <th class="amount">Amount</th> </tr> </thead> <tbody> <?php /* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */ foreach ($transactionList as $value){ $transactionID = $value['transactionID']; $transactionAmount = $value['amount']; $transactionDate = $value['transactionDate']; $reference = $value['reference']; echo "<tr onclick='displayTransaction()'>"; echo "<td style='background-color:$colour'>$transactionID</td>"; echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>"; echo "</tr>"; echo "<div class='transactionBox_class' id='transactionBox'> <div class='wrapper'> <h2>Transaction Details</h2> <div class='content'> <div class='container'> <form> <label>Transaction ID:</label> <p>$transactionID</p> <label>Amount:</label> <p>$transactionAmount</p> <label>Date:</label> <p>$transactionDate</p> <label>Reference:</label> <p>$reference</p> </form> </div> </div> </div> </div>"; }?> </tbody> </table> </div> </body>

Answer 1

You can create a class called visible or something and add it to the children in the when it gets clicked.

You can use element.classList.add("my-class"); to add a class (.remove("myclass") to remove it)

Answer 2

After analyzing your foreach loop I can see that there are some rows of the table getting populated but the id remains the same for every transaction division that is transactionBox which is why you are getting only first row which is the first element with the id .

Solutions:-

1. Create a dynamic ID for each of the row's transaction division.

echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
                  echo "</tr>";
                        echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
                                <div class='wrapper'>
                                    <h2>Transaction Details</h2>

2. Use custom attribute but yaah unique.

echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
                  echo "<td style='background-color:$colour'>$transactionID</td>";
                  echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
                  echo "</tr>";
                        echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
                                <div class='wrapper'>
                                    <h2>Transaction Details</h2>

The working examples are below.

 function showDetails_1(elem){ var actual_elem = "#transaction_"+elem; console.log(actual_elem) $(actual_elem).attr("style","display:block"); } function showDetails_2(elem){ var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]"; console.log(actual_elem); $(actual_elem).attr("style","display:block"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border=3> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> <th>column 4</th> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td><button onclick="showDetails_1(433)">show</button></td></tr> <tr> <td colspan="4"> <div class="tansaction" style="display:none" id="transaction_433"> Yo..: here are the details_1 </div></td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr> <tr> <td colspan="4"> <div class="tansaction" style="display.none" id="transaction" transaction-type="433"> Yo..! here are the details_2 </div></td> </tr> </table>