无提交操作下获取动态按钮值并在弹窗展示对应行数据

问题根源 #

循环生成的按钮都调用无参数的openPopup()，且弹窗内容是循环最后一次渲染的结果，导致无论点击哪行按钮，弹窗都只显示最后一行数据。以下是针对性的代码改造方案：

1. 修改循环内的按钮代码 #

将按钮改为type="button"避免默认提交，同时传递当前行的ID和所需数据给弹窗函数，注意用htmlspecialchars转义内容防止XSS：

<button type="button" class="btn0" onclick="openPopup(
    <?php echo $row['id']; ?>,
    '<?php echo htmlspecialchars($row['check_item']); ?>',
    '<?php echo htmlspecialchars($row['remark'] ?? ''); ?>',
    <?php echo $row['is_checked'] ? 'true' : 'false'; ?>
)">编辑</button>

2. 改造弹窗HTML结构 #

添加隐藏域存储行ID，预留备注输入框和第二条备注的容器（默认隐藏）：

<div id="myForm" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid #ccc; padding:20px; background:white;">
  <input type="hidden" name="row_id" id="rowId">
  <p>检查项：<span id="checkItemDisplay"></span></p>
  <label>已完成：<input type="checkbox" name="is_checked"></label><br>
  <label>备注：<textarea name="remark" rows="3"></textarea></label><br>
  <div id="secondRemarkContainer" style="display:none;">
    <label>第二条备注：<textarea name="second_remark" rows="3"></textarea></label><br>
  </div>
  <button onclick="submitForm()">提交修改</button>
  <button onclick="document.getElementById('myForm').style.display='none'">关闭</button>
</div>

3. 编写弹窗填充函数 #

接收按钮传递的参数，动态更新弹窗内的表单数据：

function openPopup(id, checkItem, remark, isChecked) {
  const form = document.getElementById("myForm");
  // 赋值行ID到隐藏域
  form.querySelector('input[name="row_id"]').value = id;
  // 展示检查项
  document.getElementById("checkItemDisplay").textContent = checkItem;
  // 填充备注和复选框状态
  form.querySelector('textarea[name="remark"]').value = remark;
  form.querySelector('input[name="is_checked"]').checked = isChecked;
  // 重置第二条备注容器状态
  document.getElementById("secondRemarkContainer").style.display = 'none';
  // 显示弹窗
  form.style.display = "block";
}

4. 实现无刷新提交（AJAX） #

用fetch发送表单数据到PHP后台，处理提交结果：

function submitForm() {
  const form = document.getElementById("myForm");
  const formData = new FormData(form);
  
  fetch('update_checklist.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      alert('修改成功');
      form.style.display = 'none';
      // 满足条件时显示第二条备注输入框
      if(data.allowSecondRemark) {
        document.getElementById("secondRemarkContainer").style.display = 'block';
      }
    } else {
      alert('修改失败：' + data.message);
    }
  })
  .catch(error => {
    console.error('提交错误:', error);
    alert('提交失败，请重试');
  });
}

5. PHP后台处理逻辑（update_checklist.php） #

用预处理语句防止SQL注入，处理数据更新并返回状态：

<?php
// 替换为你的数据库连接信息
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name');
if(!$conn) {
  die(json_encode(['success' => false, 'message' => '数据库连接失败']));
}

$rowId = $_POST['row_id'] ?? '';
$isChecked = isset($_POST['is_checked']) ? 1 : 0;
$remark = $_POST['remark'] ?? '';
$secondRemark = $_POST['second_remark'] ?? '';

if(empty($rowId)) {
  echo json_encode(['success' => false, 'message' => '无效的行ID']);
  exit;
}

// 查询当前行已有备注，判断是否允许添加第二条
$checkStmt = mysqli_prepare($conn, "SELECT remark, second_remark FROM checklist WHERE id = ?");
mysqli_stmt_bind_param($checkStmt, 'i', $rowId);
mysqli_stmt_execute($checkStmt);
$existingRow = mysqli_fetch_assoc(mysqli_stmt_get_result($checkStmt));

// 构建更新语句
if(!empty($secondRemark) && !empty($existingRow['remark'])) {
  $updateStmt = mysqli_prepare($conn, "UPDATE checklist SET is_checked = ?, remark = ?, second_remark = ? WHERE id = ?");
  mysqli_stmt_bind_param($updateStmt, 'issi', $isChecked, $remark, $secondRemark, $rowId);
} else {
  $updateStmt = mysqli_prepare($conn, "UPDATE checklist SET is_checked = ?, remark = ? WHERE id = ?");
  mysqli_stmt_bind_param($updateStmt, 'isi', $isChecked, $remark, $rowId);
}

if(mysqli_stmt_execute($updateStmt)) {
  // 判断是否满足添加第二条备注的条件（示例：已有第一条备注且无第二条）
  $allowSecondRemark = (!empty($remark) && empty($existingRow['second_remark'])) ? true : false;
  echo json_encode(['success' => true, 'allowSecondRemark' => $allowSecondRemark]);
} else {
  echo json_encode(['success' => false, 'message' => mysqli_error($conn)]);
}

mysqli_close($conn);
?>

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