点击数据库表格行无法获取ID，弹窗操作功能异常求助

问题描述 #

我需要实现从数据库读取数据生成可点击表格，点击行内ID时弹出包含删除、打印、更新选项的操作弹窗，但当前代码无法获取点击行的ID，始终为空值。手动指定ID时功能可正常运行，但不符合需求。

原代码问题分析 #

1. PHP语法错误：表格生成的循环中直接编写HTML代码却未用echo输出，导致页面无法正确渲染行ID。
2. 弹窗无法关联当前行：弹窗是循环外的静态元素，内部的$row["ID"]不在数据库查询循环范围内，无法获取点击行的ID，导致删除按钮依赖的div ID为空。
3. 点击事件无参数传递：openForm()函数未接收点击行的ID，弹窗无法知晓用户操作的目标行。

修改后的完整代码 #

1. 表格生成代码（修复语法错误+传递ID） #

$result = $pdo->query("SELECT * FROM tblrv order by ID desc"); 

if ($result->rowCount() > 0) {  
    while($row = $result->fetch(PDO::FETCH_BOTH)){  
        // 用echo输出HTML，给tr添加data-id属性，点击时传递ID给openForm函数
        echo '<tr data-id="' . $row["ID"] . '"> 
                <td><a onclick="openForm(' . $row["ID"] . ')">'. $row["ID"] .'</a></td> 
                <td>'. $row["RVID"] .'</td> 
                <td>'. $row["RVDate"] .'</td>  
                <td>'. $row["Name"] .'</td>  
                <td>'. $row["ContactNumber"] .'</td>
        </tr>';  
     }  
}  

2. 弹窗表单（新增存储ID的隐藏字段） #

<div class="loginPopup">
  <div class="formPopup" id="popupForm">
    <div class="formContainer">
      <h2>Choose your Action</h2>
      <!-- 隐藏输入框存储当前点击的记录ID -->
      <input type="hidden" id="currentRecordId">
      
      <a class="btn btn-danger btn-sm remove">Delete</a>
      
      <!-- 动态设置打印链接的按钮 -->
      <a class="btn btn-success pull-right" id="printBtn" target="_blank">
        <span class="glyphicon glyphicon-print"></span> Print
      </a>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button> 
      
    </div>
  </div>
</div>

3. 弹窗控制JS（接收并存储ID） #

function openForm(recordId) {
    document.getElementById("popupForm").style.display = "block";
    // 将点击行的ID存入隐藏字段
    document.getElementById("currentRecordId").value = recordId;
    // 动态设置打印按钮的跳转链接
    document.getElementById("printBtn").href = "/api/print.php/?id=" + recordId;
}

function closeForm() {
    document.getElementById("popupForm").style.display = "none";
}

4. 删除功能JS（从隐藏字段取ID+删除对应行） #

// 用事件委托绑定删除按钮点击事件，确保动态场景下也能触发
$(document).on("click", ".remove", function(){
    var id = document.getElementById("currentRecordId").value;

    if(confirm('Are you sure to Remove Invoice #' + id + ' ')) {
        $.ajax({
           url: "/api/delete.php",
           type: 'GET',
           data: {id: id},
           error: function() {
              alert('Something is wrong');
           },
           success: function(data) {
                // 根据data-id属性删除对应的表格行
                $("tr[data-id='" + id + "']").remove();
                Swal.fire(
                'Deleted!',
                'Your file has been deleted.',
                'success'
                );
                closeForm(); // 删除完成后关闭弹窗
           }
        });
    }
});

关键修改点说明 #

• 表格行添加data-id属性，方便后续定位删除；点击ID时将行ID传递给openForm函数。
• 弹窗新增隐藏字段存储当前操作的ID，替代原代码中无效的div ID绑定。
• 打印按钮的链接通过JS动态生成，确保每次弹窗都对应正确的记录ID。
• 删除功能改用事件委托绑定，避免静态绑定可能失效的问题，同时从隐藏字段获取正确ID。

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