本文讲解如何通过 PHP + 表单提交实现对 HTML 表格的增量式追加行，避免每次提交后覆盖原有内容；核心在于分离数据插入逻辑与视图渲染逻辑，利用循环遍历数据库结果动态生成多行表格，而非硬编码单次 echo。
本文讲解如何通过 php + 表单提交实现对 html 表格的**增量式追加行**，避免每次提交后覆盖原有内容；核心在于分离数据插入逻辑与视图渲染逻辑，利用循环遍历数据库结果动态生成多行表格，而非硬编码单次 `echo`。
在实际开发中，许多初学者会误将“表单提交 → 插入数据库 → 单次 echo 表格行”写成线性流程，导致第二次提交时仅渲染最新一条记录——这本质上是视图层未同步读取全部数据，而非数据库写入失败。正确做法是：每次页面加载时，从数据库查询所有符合条件的记录，并用循环逐行输出 <tr>。<h3>✅ 正确实现步骤</h3>
<ol><li>
<strong>表单提交后执行 INSERT（保持你已有的安全预处理）</strong><br>
确保使用 PDO 或 MySQLi 的预处理语句防止 SQL 注入，例如：</li></ol><pre class="brush:php;toolbar:false;">if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['addCustomer'])) {
$stmt = $pdo->prepare("INSERT INTO work_tracker (customer, site_code, urgency, outage, date_requested, requested_by, comments) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->execute([
$_POST['addCustomer'],
$_POST['addSite'],
$_POST['urgency'] ?? '',
$_POST['outage'] ?? '',
date('Y-m-d'),
$_POST['requestedBy'] ?? '',
$_POST['comments'] ?? ''
]);
}</pre><ol start="2"><li>
<strong>表格渲染部分：改用 <code>while 或 foreach 动态输出所有匹配记录
删除原先只输出单行的 echo，改为查询并遍历全部 TBayTel 相关数据：
<section class="tables mt-5 container-fluid">
<div class="row">
<div class="col-12">
<table class="tbaytel-table">
<caption>TBayTel</caption>
<thead>
<tr>
<th>Site Code / Name</th>
<th>Urgency</th>
<th>Outage Description</th>
<th>Date Requested</th>
<th>Aging in days</th>
<th>Requested By</th>
<th>Comments</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
// 查询所有 customer = 'TBayTel' 的记录（按时间倒序更佳）
$sql = "SELECT * FROM work_tracker WHERE customer = ? ORDER BY id DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute(['TBayTel']);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
// 自动计算 Aging（示例：基于当前日期与 date_requested 差值）
$requestedDate = new DateTime($row['date_requested']);
$today = new DateTime();
$aging = $today->diff($requestedDate)->days;
echo "<tr data-id='{$row['id']}'>";
echo "<td>{$row['site_code']}</td>";
echo "<td>{$row['urgency']}</td>";
echo "<td>{$row['outage']}</td>";
echo "<td>{$row['date_requested']}</td>";
echo "<td>{$aging}</td>";
echo "<td>{$row['requested_by']}</td>";
echo "<td>{$row['comments']}</td>";
echo "<td><span class='status-badge'>{$row['status'] ?: 'Pending'}</span></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
</section>-
可选增强：前端无刷新追加（AJAX 方案）
若希望提升体验、避免整页刷新，可在表单提交后用 AJAX 发送数据，并用 JavaScript 动态插入新<tr>（需返回 JSON 格式的新记录）：<pre class="brush:php;toolbar:false;">document.querySelector('.addWork').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); fetch('save_work.php', { method: 'POST', body: formData }) .then(r => r.json()) .then(data => { if (data.success) { const row = ` <tr data-id="${data.id}"> <td>${data.site_code}</td> <td>${data.urgency}</td> <td>${data.outage}</td> <td>${data.date_requested}</td> <td>0</td> <td>${data.requested_by}</td> <td>${data.comments}</td> <td><span class="status-badge">Pending</span></td> </tr> `; document.querySelector('.tbaytel-table tbody').insertAdjacentHTML('afterbegin', row); this.reset(); // 清空表单 } }); });</pre><h3>⚠️ 注意事项与最佳实践</h3> <ul> <li> <p><strong>永远不要依赖客户端输入直接拼接 HTML</strong>：所有 <code>$row数据均来自数据库，已天然隔离 XSS 风险；但若显示用户可控字段（如comments），建议配合htmlspecialchars()输出：echo "<td>" . htmlspecialchars($row['comments'], ENT_QUOTES, 'UTF-8') . "</td>";
状态标记与软删除：如需“移除表格行但保留 DB 记录”，可在数据库增加
is_visible TINYINT(1) DEFAULT 1字段，查询时追加AND is_visible = 1；前端点击“完成”时调用 API 更新该字段即可。-
性能提示：当记录量增大（>500 行），应引入分页或虚拟滚动，避免一次性加载过多 DOM 节点。
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“PHP免费学习笔记（深入）”；
通过以上重构，你的工作追踪器即可真正支持无限次表单提交 → 多行持续追加 → 状态灵活管理，兼顾安全性、可维护性与用户体验。
