如何在单击时获取模式按钮上的行 ID

Question

我在数据表的一行数据中有一个按钮，如果单击该按钮，模式将打开并且用户可以更新一些数据，使用 ajax 获取数据并发送到另一个 php 文件。 单击按钮时我的表格模式打开

问题是，当我单击按钮时，我得到的行始终为 1（第一行），因此第一行中的数据将是更新的数据，而不是单击按钮的行。 这是按钮的代码。

            <td>
          
            <?php 
              if ($row['status'] == 0){
            ?>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalEdit"  name="buttonModal" id="buttonModal" data-row="<?php echo $row['id'];?>">
              <i class="far fa-edit"></i>
            </button>
          
            <?php
              }else{
            ?>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalEdit"  name="buttonModal" id="buttonModal" data-row="<?php echo $row['id'];?>"disabled>
              <i class="far fa-edit"></i>
            </button>
            
            <?php
              }
            ?>
          </td>

模态：

<div class="modal" id="modalEdit">
      <div class="modal-dialog">
          <div class="modal-content">
              <!-- Modal Header -->
              <div class="modal-header text-light" style="background-color: #FF9B6A">
                  <h4 class="modal-title">Edit Status Pembayaran Peserta</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <!-- Modal body -->
              <div class="modal-body">
              <tr>
                  <div class="form-check">
                    <form method="POST">
                      <input class="form-check-input" type="radio" name="status" id="approved" value="1">
                      <label class="form-check-label" for="approved"> Approved </label>
                      <br>
                      <input class="form-check-input" type="radio" name="status" id="rejected" value="2">
                      <label class="form-check-label" for="rejected"> Rejected </label>
                    </form>
                  </div>
              </tr>
              <tr>
                  <td colspan="2">Catatan untuk peserta: </td>
              </tr>
              <tr>
                  <td colspan="2">
                      <textarea class="form-control" id="catatan" placeholder="Catatan"></textarea>
                  </td>
                  <p style="font-size: 14px">Di isi jika ada</p>
              </tr>
              </div>
              <div class="modal-footer">
              <p style="color: red">Setelah Anda mengedit, maka sistem secara otomatis akan mengirimkan E-mail mengenai status pembayaran kepada peserta yang bersangkutan.</p>
              <button type="submit" class="btn btn-primary" id="submit">Save</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
              </div>
          </div>
      </div>
  </div>

剧本：

<script>
$(document).ready(function() {
    $('#table').DataTable();
    $("#submit").click(function(){
        // if($('#status').val() != "" && $('#data-row').val() != ""){
        if($('#status').val() != "" ){
            var status = $("input[type='radio']:checked").val();

            var element = document.getElementById('buttonModal');
            var row = element.getAttribute('data-row');
            alert(row);

            let fd = new FormData();
            fd.append("status",status);
            fd.append("row",row);
            $.ajax({
                url: "sisiAdmin_action.php",
                method: "POST",
                data: fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    // alert(res);
                    if(res == 'Berhasil update status'){
                        Swal.fire({
                        position: 'top-middle',
                        icon: 'success',
                        title: 'Berhasil update status',
                        showConfirmButton: false,
                        timer: 2000
                        })
                        $('#status').val("");
                        $('#data-row').val("");
                    }
                    else{
                        Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Gagal update status'
                        })
                    }
                },
                error: function () {
                    alert("Gagal");
                } 
            });
        }
        else{
            Swal.fire('Data belum lengkap!')
        }
    });
    $(document).ajaxStop(function(){
        window.location.reload();
    });
  });
</script>

Answer 1

在多个地方使用 id 属性会使您的代码无效。

看起来您在单击后查找数据，我建议您在回调中使用事件参数并使用它来确定单击了哪个按钮。 有关更多详细信息，请查看https://api.jquery.com/submit/

Answer 2

首先，您必须防止为您的元素设置非唯一 id，根据html 生活标准，每个 DOM 元素都有一个不同的 id 属性名称非常重要：

可以在所有 HTML 元素上指定 class、id 和 slot 属性。 ……。 当在 HTML 元素上指定时，id 属性值在元素树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。 该值不得包含任何 ASCII 空格。

之后，当您在 $("#submit") 元素上触发事件时，您将无法获取先前触发的目标以从中获取行 ID，因此通过选择var element = document.getElementById('buttonModal'); 你只得到第一个。

解决方案是通过 JavaScript 以编程方式运行模态：

$("#myModal").modal('show');

当触发行上的点击事件时：

$(document).ready(function(){
    $("#buttonModal").click(function(){
        $("#modalEdit").modal('show');
    });
});

现在以编辑模式形式放置一个隐藏的输入元素：

 <input type="hidden" name="row_id" id="row_container">

并在显示模态之前设置它：

$(document).ready(function(){
    $("#buttonModal").click(function(event){
        $("#row_container").value(event.target.data('row'));
        $("#modalEdit").modal('show');
    });
});

然后发送表格。