从单击哪个按钮的行中获取数据

Question

我有以下需要将用户 ID 传递给 PHP 脚本的 ajax。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 中。如何做到这一点？                                <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>

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

}

查询：

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

  }

}