click on a table field to load the edit form with the selected id

Question

I have a user table and would like when clicking the edit button to load the edit form without refreshing the page with the id selected using jquery would be possible? below follows the code:

<table class="table">
   <thead class="thead bg-info text-light">
     <tr>                    
       <th scope="col">ID</th>
       <th scope="col">Nome</th>
       <th scope="col">E-mail</th>
       <th scope="col">Nível</th>                  
       <th scope="col">Editar</th>
       <th scope="col">Excluir</th>
      </tr>
    </thead>
    <tbody>

     <?php

      include "../config/cnn.php";

      $query = $pdo->query("Select * FROM USUARIOS;");

      while ($linha = $query->fetch(PDO::FETCH_ASSOC))                           
         {                            
           echo'<tr>';                                             
            echo'<td>'."{$linha['id']}".'</td>';
            echo'<td>'."{$linha['administrador_nome']}".'</td>';                            
            echo'<td>'."$linha['administrador_email']}".'</td>';  
            echo'<td>'."$linha['administrador_nivel']}".'</td>';   
            echo'<td><a id="edituser"href="'."../frmEditar/frmEditUser.php?id="."{$linha['id']}".'">
           <span><i class="far fa-edit"></i></span></a></td>';
            echo'<td><a>
            <span><i class="fas fa-trash"></i></span></a></td>';
          echo'</tr>';
                    }?>                
     </tbody>
   </table>            


Abaixo segue o script jquery que estou usando no sistema

    <script>
      $("#edituser").click(function(){
          $("#main").load("../frmEditar/frmEditUser.php");
      });      
    </script>

Answer 1

Try this way. You can use CSS to make the button transparent

<td><button type='button' onclick='pegaId(this)' value='{$linha['id']}'>Bla bla bla</button></td>

          <script>
             function pegaId(id){
             var id = id.value;
                }
          </script>