Получение данных из строки, какая кнопка нажата

Question

У меня есть следующий ajax, который должен передать userID к PHP скрипту.

document.getElementById("delete").addEventListener("click", function(){
 if (confirm("Are you sure you want to delete this user's account?")) {
    $.ajax({
    url: 'deleteUser.php?id='+<?php echo $userID ?>,
    success: function(data) {
    toastr.danger("User successfully deleted!");
  }
});
 } else {

 }
});

Я не уверен, как на самом деле получить данные строки от используемой кнопки, поскольку они размещены в TD каждой строки, когда она проходит каждую запись в наборе. Как бы один совершил sh это?

                                <table class="table table-bordered">
                                  <thead class="thead-dark">
                                    <tr>

                                      <th scope="col">First Name</th>
                                      <th scope="col">Last Name</th>
                                      <th scope="col">Email</th>
                                      <th scope="col">Username</th>
                                      <th scope="col">Account Type</th>
                                      <th scope="col">Actions</th>
                                    </tr>
                                  </thead>
                                  <tbody>

                                        <?php

                                        $query = $pdo->query("SELECT * FROM accounts WHERE company ='".$res['company']."' ")->fetchall();

                                        foreach($query as $row){
                                            echo '   <tr>';

                                            echo '   <td>'.$row['fname'].'</td>' ;
                                            echo '   <td>'.$row['lname'].'</td>' ;
                                            echo '   <td>'.$row['email'].'</td>' ;
                                            echo '   <td>'.$row['account_name'].'</td>' ;
                                            echo '   <td>'.$row['user_type'].'</td>' ;
                                            echo '   <td><button id="delete" type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>';
                                            echo '   <button id="edit" type="button" class="btn btn-info"><i class="fas fa-user-edit"></i></button> </td>';
                                            echo '   </tr>';


                                        } 
                                        ?>

                                  </tbody>
                                </table>

Answer 1

Вы можете сделать это следующим образом: php:

foreach($query as $row){
   echo '   <tr>';

    echo '   <td>'.$row['fname'].'</td>' ;
    echo '   <td>'.$row['lname'].'</td>' ;
    echo '   <td>'.$row['email'].'</td>' ;
    echo '   <td>'.$row['account_name'].'</td>' ;
    echo '   <td>'.$row['user_type'].'</td>' ;
    echo '   <td><button data-id="' . $row['id'] . '" type="button" class="btn btn-danger delete"><i class="far fa-trash-alt"></i></button>';
    echo '   <button type="button" class="btn btn-info edit"><i class="fas fa-user-edit"></i></button> </td>';
  echo '   </tr>';
}

Jquery:

$("button.delete").each(function(){
 $(this).on('click', function(e){
    if (confirm("Are you sure you want to delete this user's account?")) {
       $.ajax({
          url: 'deleteUser.php?id='+$(this).data('id'),
          success: function(data) {
             toastr.danger("User successfully deleted!");
          }
       });
    } else {
       //do something else
    }
 }); 
});

Answer 2

HTML 4.01 спецификация говорит, что ID должен быть уникальным для всего документа.

HTML 5 спецификация говорит то же самое, но другими словами. Он говорит, что ID должен быть уникальным в своем домашнем поддереве, которое, в основном, является документом, если мы прочитаем его определение.

Сначала я исправлю это: <button id="delete" должен быть уникальным

Далее - я бы добавил onClick к вашей кнопке удаления, чтобы у вас было <button onclick="deleteUser(2);"

Затем я бы переписал вашу регистрацию слушателя просто как функцию:

function deleteUser(id){
if (confirm("Are you sure you want to delete this user's account?")) {
    $.ajax({
    url: 'deleteUser.php?id='+<?php echo $userID ?>,
    success: function(data) {
    toastr.danger("User successfully deleted!");
  }
}