Javascript 将数据从HTML表传递到Modal，然后再传递到PHP脚本

我有一个index.php，其中有一个包含MySQL数据库数据的表。表中的每一行都有数据库中相应数据的数据。每行有一个删除按钮。我想显示一个模式并请求删除该条目的权限。如果按下accepting按钮，我希望将该行的id传递给delete.php脚本，在该脚本中处理删除操作。那么，如何将表中一行的id传递给modal，然后再传递给delete.php呢。我知道我需要jquery和ajax，但我对它们完全是初学者。我正在使用引导

这是我的按钮：

<a class="btn btn-danger" href="#delModal" data-toggle="modal 
               data-row-id="<?php echo $row['id'];?>" " >Delete</a>

我的情态：

<div class="modal" id="deleteModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">Delete Entry</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <input type="hidden" name="id" value=""/>
  <div class="modal-body">
    <p>Are you sure that you want to delete the selected Entry? There is no way to restore the deleted data!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-success" id="accDelBtn">Yes, delete.</button>
    <button type="button" class="btn btn-danger" id="disMdBtn" data- 
 dismiss="modal">No, abort.</button>
  </div>
</div>

删除条目
&时代；
是否确实要删除所选条目？无法恢复已删除的数据

是的，删除。
不，中止。

我的jquery/ajax垃圾处理尝试：

<script type="text/javascript">
$('#delBtn').on('click', function() {
$('#deleteModal').show();
});

$('#disMdBtn').on('click', function(){
    $('#deleteModal').hide();
});

 $('#accDelBtn').click(function() {

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: { id: $row['id'] }
           })  
        });
</script>

$（'#delBtn'）。在（'click'，function（）上{
$（'#deleteModal'）.show（）；
});
$（'disMdBtn'）。在（'click'，function（）上{
$（'#deleteModel'）.hide（）；
});
$（'#accDelBtn'）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“delete.php”，
数据：{id:$row['id']}
})  
});

---

感谢您的帮助

您需要全局存储行的id。在脚本开头添加一个变量：

var rowToDelete = null;

然后，单击删除按钮时，在单击处理程序中更新该按钮：

rowToDelete = ID_TO_DELETE;

最后，您可以通过以下方式传输：

data: { id: rowToDelete }
           })  
        });

---

您已经放置了一个名属性为“id”的隐藏字段，可用于执行进一步的操作

检查以下代码：

<script type="text/javascript">
    $('#delBtn').on('click', function() {
        $('#deleteModal').show();
        // setting value of hidden input field by using currently clicked link data-row-id attribute
        $('#deleteModal').find('input[name="id"]').val($(this).attr('data-row-id'));
    });

    $('#disMdBtn').on('click', function(){
        $('#deleteModal').hide();
    });

    $('#accDelBtn').click(function() {
        // retrieving value of hidden input field
        var id = $('#deleteModal').find('input[name="id"]').val();
        $.ajax({
            type: "POST",
            url: "delete.php",
            data: { id: id }
        });
    });
</script>

$（'#delBtn'）。在（'click'，function（）上{
$（'#deleteModal'）.show（）；
//使用当前单击的链接数据行id属性设置隐藏输入字段的值
$（'#deleteModel'）.find（'input[name=“id”]”）.val（$（this.attr（'data-row-id'））；
});
$（'disMdBtn'）。在（'click'，function（）上{
$（'#deleteModel'）.hide（）；
});
$（'#accDelBtn'）。单击（函数（）{
//正在检索隐藏输入字段的值
var id=$（'#deleteModel'）.find（'input[name=“id”]”）.val（）；
$.ajax({
类型：“POST”，
url:“delete.php”，
数据：{id:id}
});
});

---

我刚刚设置了隐藏字段的值，在锚标记上单击。并在执行ajax调用时检索隐藏字段值。

我为每个字段添加了一个属性‍<代码>按钮标记名为

记录id

，记录id应存储在其中

例如：

<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="delBtn" record_id="1">
                <span aria-hidden="true">&times;</span>
            </button>

&时代；

当点击按钮（“#delBtn”）时，我获取ID并保存变量

 <script type="text/javascript">
        var id = null
        $('#delBtn').on('click', function() {
             id=$("#delBtn").attr("record_id")
            $('#deleteModal').show();
        });

        $('#disMdBtn').on('click', function(){
            $('#deleteModal').hide();
        });

        $('#accDelBtn').click(function() {

            $.ajax({
                type: "POST",
                url: "delete.php",
                data: { id: id }
            })
        });
    </script>

变量id=null
$（'#delBtn'）。在（'click'，function（）上{
id=$（“#delBtn”）.attr（“记录id”）
$（'#deleteModal'）.show（）；
});
$（'disMdBtn'）。在（'click'，function（）上{
$（'#deleteModel'）.hide（）；
});
$（'#accDelBtn'）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“delete.php”，
数据：{id:id}
})
});

---

当我点击按钮（“#accDelBtn”）时，我会发送它。

那么您的尝试结果如何？你有错误吗？（您已经检查了浏览器的Javascript控制台，对吗？）？您已经完成了哪些调试？你在寻求帮助，但你并没有说有什么错。你的解决方案是可行的，但我认为在jQuery环境+初学者开发中，使用HTML（以及一种暂时的HTML）传递数据容易出错。让我们尝试灌输一些最佳实践；）谢谢你抽出时间，你知道有什么更好的选择吗？请分享，因为我太渴望提高技能了。