如何为PHP分类列表添加JavaScript和jQuery删除确认功能？

Hey there! Let's get that delete confirmation feature set up for your category list. I'll walk you through updating the PHP code first, then adding the jQuery/JavaScript logic to handle the confirmation prompt.

First, let's finish and enhance your existing PHP function to add a delete link alongside the edit option. We'll add a dedicated class and data attributes to make it easy to target with JavaScript later:

// 从数据库获取所有分类的函数
function find_all_category(){
    global $connection;
    $query = "SELECT * FROM `category`";
    // 从数据库获取数据
    $get_cat_details = mysqli_query($connection, $query);
    
    // 检查查询是否成功（添加错误处理）
    if(!$get_cat_details) {
        die("数据库查询失败: " . mysqli_error($connection));
    }
    
    while($row=mysqli_fetch_assoc($get_cat_details)) {
        // 提取数组数据
        $cat_id=$row['catid'];
        $cat_name=$row['catname'];
        echo "<tr>";
        echo "<td>{$cat_id}</td>";
        echo "<td>{$cat_name}</td>";
        echo "<td>
                <a href='category.php?edit={$cat_id}' class='action-link'><i class='fa fa-pencil'></i> 编辑</a>
                <a href='category.php?delete={$cat_id}' class='action-link delete-link' 
                   data-cat-id='{$cat_id}' data-cat-name='{$cat_name}'>
                    <i class='fa fa-trash'></i> 删除
                </a>
              </td>";
        echo "</tr>";
    }
}

Next, we'll add the JavaScript logic to intercept delete clicks and show a confirmation prompt. Make sure your page has jQuery loaded first (if not, add the script tag in your <head>):

<!-- 引入jQuery（如果页面还没加载的话） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$(document).ready(function() {
    // 监听所有删除链接的点击事件
    $('.delete-link').on('click', function(e) {
        // 阻止链接默认的跳转行为，先弹出确认框
        e.preventDefault();
        
        // 从data属性中获取分类信息，用于更友好的提示
        const categoryId = $(this).data('cat-id');
        const categoryName = $(this).data('cat-name');
        
        // 弹出确认对话框
        const isConfirmed = confirm(`确定要删除分类 "${categoryName}" (ID: ${categoryId}) 吗？此操作无法撤销！`);
        
        // 如果用户确认，就跳转到删除处理页面
        if(isConfirmed) {
            window.location.href = $(this).attr('href');
        }
    });
});
</script>

Key Details About This Code: #

• $(document).ready() ensures the script runs only after the page's DOM is fully loaded
• e.preventDefault() stops the link from immediately navigating to the delete URL
• We use data() to pull the category ID and name from the link's attributes, making the confirmation prompt more specific and user-friendly
• The native confirm() dialog is simple and works across all browsers

If you want a more modern, styled confirmation instead of the browser's default dialog, you can use a Bootstrap modal (requires Bootstrap CSS and JS):

<!-- 引入Bootstrap资源 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 隐藏的删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">确认删除分类</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        确定要删除分类 <strong id="modalCatName"></strong> (ID: <span id="modalCatId"></span>) 吗？此操作无法撤销。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">删除</a>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    let deleteUrl = '';
    
    // 打开模态框并填充分类信息
    $('.delete-link').on('click', function(e) {
        e.preventDefault();
        deleteUrl = $(this).attr('href');
        
        $('#modalCatId').text($(this).data('cat-id'));
        $('#modalCatName').text($(this).data('cat-name'));
        
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    });
    
    // 确认删除后跳转
    $('#confirmDeleteBtn').on('click', function() {
        window.location.href = deleteUrl;
    });
});
</script>

内容的提问来源于stack exchange，提问作者orre