本文介绍如何使用原生 javascript 和 php 实现“输入条形码 → 异步查询数据库 → 填充当前行 → 自动添加下一行输入框”的交互式表格功能，全程无需 jquery，适合初学者快速上手 ajax 与 dom 操作。
要实现用户逐行录入商品信息（通过扫描或输入条形码自动填充产品、数量、价格，并动态追加新输入行），核心在于三步协同：HTML 结构初始化 → 输入事件监听 → 异步数据获取与 DOM 更新。下面以专业、可落地的方式逐步说明。
✅ 1. 基础 HTML 结构（含唯一标识）
确保每行使用递增 ID（如 row-1, row-2）便于精准操作，首行即为带输入框的模板：
<table id="products" class="s-table">
<thead>
<tr>
<th style="text-align: center;">barcode</th>
<th style="text-align: center;">product</th>
<th style="text-align: center;">amount</th>
<th style="text-align: center;">price</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<td style="text-align: center;">
<input type="text" placeholder="Enter barcode" data-row="1">
</td>
<td id="product-1" style="text-align: center;"></td>
<td id="amount-1" style="text-align: center;"></td>
<td id="price-1" style="text-align: center;"></td>
</tr>
</tbody>
</table>⚠️ 注意：避免使用 onchange 写在 HTML 中（易维护性差），改用事件委托或动态绑定。
✅ 2. JavaScript：监听输入 + 发起 AJAX 请求
使用 addEventListener('blur')（失焦触发）更符合扫码枪场景（扫码后自动跳转），并用 fetch() 发起原生 AJAX：
// 初始化首行监听
document.querySelector('input[data-row="1"]').addEventListener('blur', function() {
const rowId = this.dataset.row;
fetchProductByBarcode(this.value, rowId);
});
function fetchProductByBarcode(barcode, rowId) {
if (!barcode.trim()) return;
// 调用后端 PHP 接口（例如 get-product.php?barcode=...）
fetch(`get-product.php?barcode=${encodeURIComponent(barcode)}`)
.then(response => response.json())
.then(data => {
if (data.success) {
// 填充当前行
document.getElementById(`product-${rowId}`).textContent = data.product || '';
document.getElementById(`amount-${rowId}`).textContent = data.amount || '';
document.getElementById(`price-${rowId}`).textContent = data.price ? `${data.price} $` : '';
// 创建下一行
addNewInputRow(Number(rowId) + 1);
} else {
alert(`未找到条形码 ${barcode} 对应的商品`);
}
})
.catch(err => console.error('请求失败:', err));
}
function addNewInputRow(nextId) {
const tbody = document.querySelector('#products tbody');
const row = document.createElement('tr');
row.id = `row-${nextId}`;
const cells = ['barcode', 'product', 'amount', 'price'].map(name => {
const td = document.createElement('td');
td.style.textAlign = 'center';
if (name === 'barcode') {
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter barcode';
input.dataset.row = nextId;
input.addEventListener('blur', () => fetchProductByBarcode(input.value, nextId));
td.appendChild(input);
} else {
td.id = `${name}-${nextId}`;
}
return td;
});
cells.forEach(td => row.appendChild(td));
tbody.appendChild(row);
// 自动聚焦新输入框（提升体验）
row.querySelector('input').focus();
}✅ 3. PHP 后端示例（get-product.php）
确保安全过滤与数据库查询（使用 PDO 防 SQL 注入）：
<?php
header('Content-Type: application/json; charset=utf-8');
if (!isset($_GET['barcode']) || !is_string($_GET['barcode'])) {
echo json_encode(['success' => false]);
exit;
}
$barcode = trim($_GET['barcode']);
if (empty($barcode)) {
echo json_encode(['success' => false]);
exit;
}
try {
$pdo = new PDO("mysql:host=localhost;dbname=your_db", "user", "pass");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare("SELECT product, amount, price FROM products WHERE barcode = ?");
$stmt->execute([$barcode]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($row) {
echo json_encode([
'success' => true,
'product' => htmlspecialchars($row['product']),
'amount' => (int)$row['amount'],
'price' => (float)$row['price']
]);
} else {
echo json_encode(['success' => false]);
}
} catch (Exception $e) {
error_log('DB Error: ' . $e->getMessage());
echo json_encode(['success' => false]);
}
?>✅ 关键注意事项
- 安全性：始终对用户输入进行 trim()、htmlspecialchars() 和参数化查询，杜绝 XSS 与 SQL 注入。
- 用户体验：使用 blur 而非 change 更适配扫码枪；添加加载状态（如禁用输入框+显示 spinner）可进一步优化。
- 扩展性：后续如需编辑/删除某行，可为每行添加操作列，通过 data-row 属性关联逻辑。
- 错误处理：前端需判断 response.ok 和 data.success，后端统一返回结构化 JSON。
通过以上结构化实现，你将获得一个轻量、健壮、易于维护的动态表格系统——从第一行输入开始，每一笔条形码都驱动一次服务端查询与客户端视图更新，真正实现「所见即所得」的数据录入流。
