表格更新后只有第一行生效，根本原因是php循环中重复使用相同id（如id="mod"），导致$("#mod")仅绑定首个元素；应改用class+data属性组合标识，并采用事件委托避免事件丢失。
直接用 fetch() 拉数据 + innerHTML 或 insertAdjacentHTML() 替换 <tbody> 是最稳妥的起点，但必须避开重复 <code>id、全量重绘、事件丢失这三类坑。
为什么表格更新后只有第一行生效？
根本原因是 PHP 循环生成的输入框用了相同 id="mod" 或 id="ctgr"。浏览器只认第一个，$("#mod") 永远只绑定首个元素。
- ✅ 正确做法：用
class="qty-input"+data-order-id="123"+data-field="quantity"组合标识每个单元格 - ❌ 避免：
id在循环中重复出现；也不要用name="mod"依赖表单序列化，它不解决事件绑定问题 - 监听示例：
document.addEventListener("change", e => { if (e.target.classList.contains("qty-input")) { submitUpdate(e.target); } });
如何避免每次更新都重绘整个表格？
全量替换 <tbody> 看似简单，但会销毁所有已绑定事件、丢失焦点、触发重排，尤其在上百行时明显卡顿。
<ul>
<li>✅ 推荐策略：只更新变化的行。服务端返回带 <code>id 字段的 JSON 数组，前端用 Map 缓存当前 DOM 行（tr[data-id="456"] → trEl），比对后增删改
documentFragment 批量插入新行，再一次性 append 到 <tbody>，减少 layout thrashing
<li>⚠️ 注意：若用 <code>innerHTML = newHtml，务必确保新 HTML 中所有属性值都经 htmlspecialchars() 处理，否则 XSS 风险直线上升fetch() 返回 HTML 片段 vs JSON，怎么选？
返回纯 HTML（如 PHP 渲染好的 <tr><td>...）开发快，但耦合后端模板；返回 JSON 更灵活，但前端要手写 <code>tr 拼接逻辑。
- ✅ HTML 片段适用场景：表格结构固定、后端已做 XSS 过滤、团队熟悉 PHP 模板（如 Laravel 的
@foreach直接输出<tr>） <li>✅ JSON 适用场景：需前端动态控制样式（比如某列数值超阈值标红）、要复用数据渲染图表、或使用 Vue/React 等框架管理状态</li> <li>⚠️ 关键细节：若返回 HTML，<code>fetch()后必须用response.text()，不能直接response.json()；反之亦然，类型错配会导致静默失败
真正麻烦的不是“怎么更新”，而是“更新后交互还是否有效”——比如新插入的编辑按钮没绑定事件、输入框失去 focus、滚动位置跳变。这些细节不会报错，但会让用户觉得“卡”或“不响应”，得靠 event delegation 和 scrollIntoView({block: 'nearest'}) 这类具体手段兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
