使用PHP如何获取HTML表格对应行中存储访问ID的元素以修改访问状态

方案1：自定义属性绑定ID（推荐） #

这种方式不用遍历DOM找ID，性能更高，兼容性更好，不会因为表格结构调整失效。

• 第一步：修改PHP表格渲染逻辑，给审批按钮添加存储访问ID的自定义属性
  把原来输出审批列的代码改成如下内容：

<td>
    <div class='icon-container'>
        <i class='far fa-check-square icon approve-btn' data-visit-id='". $visit['VISIT_ID'] ."'></i>
    </div>
</td>

这里新增了两个属性：approve-btn类用于绑定点击事件，data-visit-id自定义属性直接存储当前行的访问ID。

• 第二步：添加前端JS交互逻辑，获取ID并发起审批请求

// 原生JS实现，不需要依赖任何框架
document.querySelectorAll('.approve-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 直接从自定义属性获取访问ID
        const visitId = this.dataset.visitId;
        // 获取当前行的状态单元格，后续更新页面显示用
        const statusCell = this.closest('tr').querySelector('td:nth-child(5)');

        // 发起后端审批请求，这里用fetch示例，也可以换成你常用的请求方式
        fetch('approve_visit.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `visit_id=${visitId}&status=APPROVED`
        })
        .then(res => res.json())
        .then(result => {
            if (result.success) {
                // 审批成功后更新页面状态
                statusCell.textContent = 'APPROVED';
                // 可选：禁用当前审批按钮，避免重复提交
                this.style.pointerEvents = 'none';
                this.style.opacity = 0.5;
            } else {
                alert('审批失败：' + result.msg);
            }
        })
        .catch(err => {
            alert('网络错误，请稍后重试');
        });
    });
});

• 第三步：添加后端处理逻辑，更新数据库状态
  新建approve_visit.php文件，代码如下：

<?php
session_start();
// 先校验管理员权限，避免未授权访问
if (empty($_SESSION['sess_flag']) || $_SESSION['sess_flag'] !== 1) {
    echo json_encode(['success' => false, 'msg' => '无操作权限']);
    exit;
}

// 参数校验
$visitId = trim($_POST['visit_id'] ?? '');
$status = trim($_POST['status'] ?? '');
if (empty($visitId) || !in_array($status, ['APPROVED', 'REJECTED'])) {
    echo json_encode(['success' => false, 'msg' => '参数不合法']);
    exit;
}

// 复用你原有的数据库连接对象更新状态
global $connection;
$updateStmt = $connection->prepare("UPDATE Visit SET STATUS = ? WHERE VISIT_ID = ?");
$updateStmt->execute([$status, $visitId]);

if ($updateStmt->rowCount() > 0) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'msg' => '未找到对应访问记录']);
}
?>

方案2：不修改HTML，直接从DOM获取ID #

如果你不想改动现有表格渲染代码，可以在点击审批按钮后遍历父级元素获取ID：

document.querySelectorAll('.far.fa-check-square').forEach(btn => {
    btn.addEventListener('click', function() {
        // 找到当前点击按钮所属的行，再找行内存储ID的th元素取内容
        const currentTr = this.closest('tr');
        const visitId = currentTr.querySelector('th.id').textContent.trim();
        // 后续请求逻辑和方案1一致
    });
});

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