本文详解如何在点击 bootstrap 表格单元格时，正确触发模态框、通过 ajax 调用 php 获取对应行数据（如 `deviceid` 和 `functiondata`），并将其填充至表单输入框中，实现可编辑与保存功能。重点解决因 jquery 选择器错误（混淆 id 与 class）导致数据无法显示的常见问题。
在使用 Bootstrap Table 配合 PHP 后端实现「点击单元格弹出编辑模态框」功能时，一个高频陷阱是：前端 jQuery 选择器与 HTML 元素属性不匹配，导致数据成功返回却无法渲染到表单中。您提供的代码中，输入框定义为 ，但 JavaScript 中却误用 $('.functionData').val(...) —— 这会尝试查找 class="functionData" 的元素，而该 class 并不存在，因此赋值失败。
✅ 正确做法是统一使用 ID 选择器：
// ✅ 修正后的 JS：使用 #functionData（ID 选择器）
$('#scandata').on('click-cell.bs.table', function (e, field, value, row, $el) {
if (field === 'functionData') { // 注意：应比对 field（列名），而非 value（单元格内容）
const deviceId = row.deviceId; // 推荐直接从 row 对象取值，更可靠
const currentFunctionData = row.functionData || '';
$.ajax({
url: 'getFunctionData.php',
type: 'POST',
dataType: 'json',
data: { deviceId: deviceId },
success: function(response) {
// 填充模态框输入框（注意：#functionData 是 ID，不是 class）
$('#functionData').val(response.functionData || currentFunctionData);
// 同时可隐藏/显式存储 deviceId（用于提交）
$('#save-form').data('device-id', deviceId);
$('#myModal').modal('show');
},
error: function(xhr) {
console.error('获取数据失败:', xhr.responseText);
alert('无法加载功能数据，请重试。');
}
});
}
});? 关键修复点说明：
- $('#functionData') → 正确匹配 ；
- field === 'functionData' → 使用 click-cell 事件的 field 参数判断列名（更健壮，避免 value 冲突）；
- 从 row 对象读取 deviceId 和 functionData，避免依赖 DOM 属性（如 $el.deviceId 不可靠）；
- 添加 dataType: 'json' 显式声明响应格式，确保 response.functionData 可安全访问；
- 使用 .data('device-id', ...) 在表单上暂存设备 ID，便于后续提交时携带。
? 同时，请同步优化您的 getFunctionData.php，确保返回标准 JSON 结构：
立即学习“PHP免费学习笔记（深入）”；
<?php
// getFunctionData.php
header('Content-Type: application/json; charset=utf-8');
require_once 'db_connection.php'; // 替换为您的数据库连接文件
$deviceId = (int)$_POST['deviceId'] ?? 0;
if ($deviceId <= 0) {
echo json_encode(['functionData' => '']);
exit;
}
$functionQuery = "SELECT functionData FROM devices WHERE deviceId = ?";
if ($stmt = $connection->prepare($functionQuery)) {
$stmt->bind_param("i", $deviceId);
$stmt->execute();
$stmt->bind_result($functionData);
$stmt->fetch();
$stmt->close();
// 统一返回对象，含 functionData 字段（即使为空）
echo json_encode(['functionData' => $functionData ?: '']);
} else {
echo json_encode(['functionData' => '']);
}? 进阶建议（提升用户体验）：
在模态框打开前添加 loading 状态（如禁用按钮 + 旋转图标）；
-
为“Save Changes”按钮绑定提交逻辑，防止重复点击：
$('#save-btn').off('click').on('click', function() { const deviceId = $('#save-form').data('device-id'); const newFunctionData = $('#functionData').val().trim(); $.post('update.php', { deviceId, functionData: newFunctionData }, function(res) { if (res.success) { $('#myModal').modal('hide'); // 可选：刷新当前行或整表 $('#scandata').bootstrapTable('refresh'); } else { alert('保存失败：' + (res.message || '未知错误')); } }, 'json'); }); 在 update.php 中务必进行服务端校验与 SQL 防注入（已使用预处理语句，这点您做得很好 ✅）。
通过以上修正，您的模态框将能准确加载并展示原始数据，用户可自由编辑后保存，真正实现「所见即所编」的闭环交互体验。
