如何在不提交表单的情况下获取动态按钮的值并精准显示对应数据行-js教程-PHP中文网

如何在不提交表单的情况下获取动态按钮的值并精准显示对应数据行

本文讲解如何通过 javascript 动态捕获 php 循环生成的按钮所携带的数据库 id，并在模态弹窗中精准展示对应行数据，避免“总是显示最后一行”的常见错误，同时保持页面不刷新、不跳转。

本文讲解如何通过 javascript 动态捕获 php 循环生成的按钮所携带的数据库 id，并在模态弹窗中精准展示对应行数据，避免“总是显示最后一行”的常见错误，同时保持页面不刷新、不跳转。

在构建动态数据表格（如设备巡检、维护清单等场景）时，常需为每行记录添加一个操作按钮（如“编辑”“查看详情”），点击后弹出包含该行专属数据的模态框（

弹层），而非整页跳转或表单提交。你当前遇到的核心问题在于：所有按钮共用同一个 onclick="openPopup()"，且未将当前行 ID 有效传递给 JS 函数，导致 openPopup() 总是读取循环结束后的最后一个 $row['id'] —— 这是典型的闭包与作用域误解。

✅ 正确做法是：*剥离内联事件，改用事件委托 + `data-属性传参 +preventDefault()` 控制行为**。以下是完整、可直接落地的解决方案：

Prezi

一款以动态画布和视觉叙事为特色的演示文稿制作工具，支持通过非线性布局组织内容并制作更具互动性的演示。

下载

1. 修改 PHP 循环中的按钮结构（推荐）

<?php while ($row = mysqli_fetch_array($controllo)): ?><tr>
<td><?php echo htmlspecialchars($row['nome']); ?></td>
  <td><?php echo htmlspecialchars($row['testo']); ?></td>
  <!-- 其他列 -->
  <td>
    <!-- 移除内联 onclick，使用 data-id 绑定唯一标识 -->
    <button type="button" class="btn0 open-popup-btn" data-id="<?php echo (int)$row['id']; ?>">
      编辑
    </button>
  </td>
</tr><?php endwhile; ?>

✅ 关键点：

type="button" 防止意外提交；

data-id 安全传递整型 ID（避免 XSS，且 JS 可直接读取）；

类名 open-popup-btn 便于后续批量绑定事件。

2. 重构 JavaScript：动态获取 ID 并填充弹窗

<!-- 弹窗容器（初始隐藏） -->
<div id="myForm" class="popup" style="display:none;">
  <div class="popup-content">
    <h3>编辑检查项</h3>
    <form id="editForm">
      <input type="hidden" name="id" id="popup-id"><label>名称：<input type="text" name="nome" id="popup-nome"></label><br><label>描述：<textarea name="testo" id="popup-testo"></textarea></label><br><!-- 其他字段... --><button type="submit">保存修改</button>
      <button type="button" onclick="closePopup()">取消</button>
    </form>
  </div>
</div>

// 使用事件委托，避免为每个按钮单独绑定
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('open-popup-btn')) {
    e.preventDefault(); // 阻止默认行为（即使 type="button" 也建议保留）

    const rowId = e.target.dataset.id;

    // ✅ 此处应通过 AJAX 加载对应行数据（推荐）
    fetch(`get_row_data.php?id=${rowId}`)
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          document.getElementById('popup-id').value = data.row.id;
          document.getElementById('popup-nome').value = data.row.nome;
          document.getElementById('popup-testo').value = data.row.testo;
          // 填充其他字段...
          document.getElementById('myForm').style.display = 'block';
        }
      })
      .catch(err => console.error('加载数据失败:', err));
  }
});

function closePopup() {
  document.getElementById('myForm').style.display = 'none';
}

// 表单提交处理（AJAX 提交，不刷新页面）
document.getElementById('editForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  fetch('save_edit.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      alert('更新成功！');
      closePopup();
      location.reload(); // 或局部刷新某行
    } else {
      alert('保存失败：' + result.message);
    }
  });
});

3. 后端支持文件（示例：get_row_data.php）

<?php header('Content-Type: application/json; charset=utf-8');
require 'db_connection.php'; // 你的数据库连接

$id = (int)$_GET['id'] ?? 0;
if (!$id) {
  echo json_encode(['success' => false, 'message' => '无效ID']);
  exit;
}

$stmt = $conn->prepare("SELECT id, nome, testo FROM your_table WHERE id = ?");
$stmt->bind_param('i', $id);
$stmt->execute();
$result = $stmt->get_result();

if ($row = $result->fetch_assoc()) {
  echo json_encode(['success' => true, 'row' => $row]);
} else {
  echo json_encode(['success' => false, 'message' => '未找到记录']);
}