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

Question

我在数据表的一行数据中有一个按钮，如果单击该按钮，模式将打开，用户可以更新一些数据，使用 ajax 获取数据并发送到另一个 php 文件。 my table modal open when the button is clicked

问题是，当我单击按钮时，我得到的行始终是 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>

更新：我设法通过点击按钮打开模式，但仍然无法获取行号...

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

更新 2：我通过这样做得到了行，现在我必须找出如何从 {"row": int}

中获取 int 值

var id;
$(document).on('click','#buttonModal',function(){
  $("#modalEdit").modal('show');
  id = $(this).data();
  var str = JSON.stringify(id);
  alert(JSON.stringify(id));
});

更新 3：好的，我做到了。这是我如何获取行 id

var id;
var row;
$(document).on('click','#buttonModal',function(){
  $("#modalEdit").modal('show');
  id = $(this).data();
  var str = JSON.stringify(id);
  const obj = JSON.parse(str);
  row = obj.row;
  // alert(row);
});

Answer 1

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

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

Answer 2

首先，您必须防止为您的元素设置非唯一 ID，根据 html living standard，DOM 的每个元素都有一个不同的 id 属性名称很重要：

The class, id, and slot attributes may be specified on all HTML elements. ……. When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any ASCII whitespace.

在那之后，当你在 $("#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($(this).data('row'));
        $("#modalEdit").modal('show');
    });
});

然后发送表格。

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

How to get row id on modal button on click

javascript

php

ajax

jquery

datatables