当前位置：首页 > 行业动态 > 正文

如何通过HTML表格实现数据库删除操作？

admin
行业动态
2025-05-01
4087

通过HTML表格展示数据库数据，每行添加删除按钮，结合JavaScript和后端API实现删除功能，需注意防止SQL注入，确保操作安全性和数据完整性，前端需确认二次操作避免误删。

需求场景
当网站需要管理存储在数据库中的数据时，常通过HTML表格展示数据条目，为实现数据管理功能，通常需包含删除操作,本指南将演示如何安全地通过HTML表格与数据库进行交互。

技术原理

前端展示：HTML表格渲染数据库查询结果
用户交互：每行数据附加删除按钮
安全验证：通过服务器端脚本处理删除请求
数据库操作：使用预处理语句执行DELETE命令

操作步骤

构建数据表格（前端）

<table class="data-table">
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <?php
    // 示例PHP数据库查询
    $stmt = $pdo->query("SELECT * FROM users");
    while ($row = $stmt->fetch()) {
      echo '<tr>';
      echo '<td>'.$row['id'].'</td>';
      echo '<td>'.$row['username'].'</td>';
      echo '<td>
              <button class="delete-btn" 
                      data-id="'.$row['id'].'"
                      onclick="confirmDelete('.$row['id'].')">
                删除
              </button>
            </td>';
      echo '</tr>';
    }
    ?>
  </tbody>
</table>

安全删除机制（后端）

如何通过HTML表格实现数据库删除操作？第1张

// delete.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
  if ($id) {
    try {
      $stmt = $pdo->prepare("DELETE FROM users WHERE id = :id");
      $stmt->execute([':id' => $id]);
      if ($stmt->rowCount() > 0) {
        http_response_code(200);
        echo json_encode(['success' => true]);
      } else {
        http_response_code(404);
        echo json_encode(['error' => '记录不存在']);
      }
    } catch (PDOException $e) {
      error_log($e->getMessage());
      http_response_code(500);
      echo json_encode(['error' => '数据库操作失败']);
    }
  } else {
    http_response_code(400);
    echo json_encode(['error' => '无效请求']);
  }
  exit;
}

交互增强（JavaScript）

function confirmDelete(userId) {
  if (confirm('确认要删除该用户？此操作不可撤销！')) {
    fetch('/delete.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ id: userId })
    })
    .then(response => {
      if (!response.ok) throw new Error('操作失败');
      return response.json();
    })
    .then(data => {
      if (data.success) {
        // 更新表格显示
        document.querySelector(`button[data-id="${userId}"]`).closest('tr').remove();
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('删除操作失败，请检查控制台日志');
    });
  }
}

安全强化措施