动态更新 HTML 表格单元格内容：基于下拉选择联动填充描述字段-js教程-PHP中文网

动态更新 HTML 表格单元格内容：基于下拉选择联动填充描述字段

本文详解如何通过 jQuery AJAX 实现 HTML 表格中“选择产品编码 → 自动填充对应描述”的实时联动功能，涵盖前端事件委托、DOM 定位、PHP 后端安全查询及常见错误修复（如 val() 与 text() 混用、ID 冲突、SQL 注入防护等）。

本文详解如何通过 jquery ajax 实现 html 表格中“选择产品编码 → 自动填充对应描述”的实时联动功能，涵盖前端事件委托、dom 定位、php 后端安全查询及常见错误修复（如 `val()` 与 `text()` 混用、id 冲突、sql 注入防护等）。

在构建动态表单（如采购单、库存录入页）时，常需根据用户在 0) { while ($row = mysqli_fetch_assoc($result)) { echo ""; } } ?>

2. 前端逻辑：事件委托 + 精准 DOM 定位

使用 $('#myLinesTable').on('change', '.productselect', ...) 实现动态行绑定；注意：

是普通元素，应使用 .text(data) 或 .html(data) 而非 .val(data)
使用 $(this).closest('tr') 精确定位当前行，再查找 .description

$(function() {
  $('#myLinesTable').on('change', '.productselect', function() {
    const pcode = $(this).val();
    const $descCell = $(this).closest('tr').find('.description');

    if (!pcode) {
      $descCell.text('');
      return;
    }

    $.post('checkproduct.php', { pcode: pcode }, function(data) {
      $descCell.text(data.trim()); // 清除可能的空白符
    }).fail(function() {
      $descCell.text('加载失败');
      console.error('AJAX 请求失败，请检查 checkproduct.php 路径和服务器响应');
    });
  });
});

3. 后端安全处理（checkproduct.php）

严禁直接拼接 SQL！ 必须使用预处理语句防止注入，并校验输入、处理空结果：

<?php // checkproduct.php —— 安全版
$servername = "XXX"; 
$username = "XXX"; 
$password = "XXX"; 
$dbname = "XXX";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

$pcode = $_POST['pcode'] ?? '';
if (empty($pcode)) {
  echo '';
  exit;
}

$stmt = $conn->prepare("SELECT ProdDescription FROM whproducts WHERE ProdCode = ?");
$stmt->bind_param("s", $pcode);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  echo htmlspecialchars($row['ProdDescription'], ENT_QUOTES, 'UTF-8');
} else {
  echo '';
}
$stmt->close();
$conn->close();
?>