javascript - PHP Ajax 从表中删除一条记录

Question

出现了一些奇怪的问题。我正在尝试使用 AJAX 从表中删除一条记录，但每当我单击删除按钮时，它每次都会发送表中最后一行的 ID，而不是我要删除的特定 ID 到我的 delete -process.php 页面。现在我检查了 PHP 页面和代码是否正常工作。当我执行 console.log(dataString) 时，我发现无论我单击哪个删除按钮，我都只会获得最后一个字段的 ID。

代码

<table class="table table-hover table-striped">
              <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Date</th>
                <th>Action</th>
              </thead>
              <tbody>
                <?php while($si = $stmt->fetch()){ extract($si); ?>
                <tr>
                  <td><?php echo $ct_id; ?></td>
                  <td><?php echo $ct_name; ?></td>
                  <td><?php echo $ct_email; ?></td>
                  <td><?php echo $ct_phone; ?></td>
                  <td><?php echo date('jS M, Y (h:i a)', strtotime($ct_date)); ?></td>
                  <td>
                    <form method="post" action="">
                      <a href="view-msg.php?id=<?php echo $ct_id; if(!empty($_GET['ids'])){ ?>&ids=<?php echo $_GET['ids']; } ?>" class="btn btn-info btn-fill">View</a>
                      <input type="text" value="<?php echo $ct_id; ?>" class="ctid">
                      <input type="submit" value="Delete" class="btn btn-danger btn-fill delete">
                    </form>
                  </td>
                </tr>
                <?php } ?>
              </tbody>

Ajax

$(document).ready(function() {
  $(".delete").click(function() {
    var dataString = {
      id: $(".ctid").val()
    };
    console.log(dataString);
    var $submit = $(this).parent().find('.delete');
    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure you want to delete this message?',
      buttons: {
        confirm: function () {
          $.ajax({
            type: "POST",
            //dataType : "json",
            url: "delete-process.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $submit.val("Please wait...");
            },
            success: function(html){
              $('.message').html(html);
              if($('.message').find('#responseBox').hasClass('alert-success')){
                $.alert(html);
                setTimeout(function(){
                  window.location.replace("support.php<?php if(!empty($_GET['ids'])){ ?>?ids=<?php echo $_GET['ids']; } ?>");
                },2000);
              }
            }
          });
        },
        cancel: function(){}
      }
    });
    return false;
  });
});

我没有包含 PHP 代码，因为在 console.log(dataString) 中检测到错误，因为单击的每个按钮都发送相同的 ID。请帮忙。

Answer 1

$(".ctid") 将返回一个包含该类所有元素的数组。

您只对单击按钮的同级按钮感兴趣，因此您应该使用 $(this).prev()。

$(this) 将引用点击的按钮。 .prev()选择紧接着的 sibling 。

$(".delete").click(function() {
    var dataString = {
      id: $(this).prev().val()
    };
    ...
});