How can I get the id of the datarow I selected in my table?

Question

I made a table which gets filled by an SQL database. With CSS I made it so, when I hover over a table row, it gets highlighted. When I click a table row (record) I want to get the id of that record and put it in a variable that I can use to update the record or delete it.

echo "<table>"; 

    echo "<tr>";
    echo "<th>".'ID'."</th>";
    echo "<th>".'Username'."</th>";
    echo "<th>".'Name'."</th>";
    echo "<th>".'Role'."</th>";
    echo "</tr>";
    foreach($result as $pers)
    {
        echo "<tr>";
        echo "<td>".$pers->id."</td>
        <td>".$pers->username."</td>
        <td>".$pers->name."</td>
        td>".$pers->role."</td>";
        echo "</tr>";
    }
echo "</table>";

Above you can see the code that creates the table, and it works, I just need a way to get de id.

Answer 1

I think the best practice is: give data attribute to "tr" element:

echo "<tr data-id='".$pers->id."'>";
...
echo "</tr>";

after you can receive id on click:

$( "tr" ).click(function() {
   var id = $(this).attr('data-id');
})

Answer 2

Hope this helps. On click it will send the ID to the console. Documentation in the source code.

 /* Put all rows in an array */ const rows = [...document.getElementsByTagName("tr")]; /* Assign event listener to each row */ rows.map(row => row.addEventListener("click", () => { /* Return the first element */ const id = row.querySelector("td"); console.log(id.textContent); }));

 tr:hover { background-color: yellow; }

 <table> <tr> <td>1</td> <td>User name 1</td> <td>Name 1</td> <td>Role 1</td> </tr> <tr> <td>2</td> <td>User name 2</td> <td>Name 2</td> <td>Role 2</td> </tr> <tr> <td>3</td> <td>User name 3</td> <td>Name 3</td> <td>Role 3</td> </tr> </table>

Answer 3

To use JS data in PHP you can use an Jquery ajax call.

$( "tr" ).click(function() {
   var id = $(this).first("td").html(); // now you have it in JS available
   $.ajax({
       url: "yourfile.php", // you can also send it to the php file that updates or deletes the record
       data: {"id": id},
       type: 'POST',
       success : function(data) { }
   });
});

Then your PHP code:

<?php
if(isset($_POST['id'])){
   // session id now has your selected id as value.
   $_SESSION['id'] = $_POST['id'];
}
else{
   unset($_SESSION['id']); // unset session id every time the page reloads
   echo "<table>"; 
   echo "<tr>";
   echo "<th>".'ID'."</th>";
   echo "<th>".'Username'."</th>";
   echo "<th>".'Name'."</th>";
   echo "<th>".'Role'."</th>";
   echo "</tr>";
   foreach($result as $pers)
   {
      echo "<tr>";
      echo "<td>".$pers->id."</td>
      <td>".$pers->username."</td>
      <td>".$pers->name."</td>
      <td>".$pers->role."</td>";
      echo "</tr>";
    }
    echo "</table>";
}

Then when you update a row in your DB you have access to $_SESSION['id'] as it changes every time you click on a tr .