HTML无法删除数据库字段，实际是前端触发、后端执行的链路，关键在fetch结构、DOM同步和字段标识稳定性。
HTML 本身不能删除数据库字段——它只是静态标记语言，没有读写数据库的能力。所谓“批量删除数据库字段”，实际是前端触发、后端执行的完整链路，关键在 fetch 请求体结构、DOM 同步时机和字段标识的稳定性。
为什么 document.querySelectorAll(':checked') 必须用在真实 DOM 上
很多开发者把 checkbox 的 checked 状态和框架数据（如 Vue 的 v-model 或 React 的 state）混为一谈。但用户点击后，只有原生 input[type="checkbox"] 的 checked 属性会实时更新；如果用了自定义样式或封装组件，而没同步到原生 input，querySelectorAll('input[type="checkbox"]:checked') 就会返回空数组。
- 必须用
document.querySelectorAll('tbody input[name="field-select"]:checked')，明确限定作用域，避开全选框 - 确保每个 checkbox 的
value是数据库字段名（如value="created_at"），不是序号或临时 ID - 若 checkbox 套在
<label></label>里，检查是否仍触发原生 click —— 可在控制台手动执行el.click()验证
后端接收字段名数组时，POST body 要怎么组织
不要拼接 URL 参数（如 ?fields=col1&fields=col2），也不要在请求头塞字段列表。标准做法是 POST JSON，且字段名必须是字符串数组，不能是逗号分隔的字符串。
- 正确：
fetch('/api/table/fields/delete', { method: 'POST', body: JSON.stringify({ fields: ['status', 'updated_by'] }) }) - 错误：
body: 'fields=status,updated_by'（后端解析易出错）或body: JSON.stringify(['status','updated_by'])（缺少字段名语义，难扩展） - 后端需校验字段名是否合法（如只允许字母、下划线、长度 ≤ 64），防止 SQL 注入或误删系统字段（如
id、created_at）
删完字段后，前端表格列怎么安全移除
不能靠重绘整张表（innerHTML = ''），否则表头 <th> 和数据行 <code><td> 的列顺序可能错位，尤其当某些字段被隐藏而非删除时。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>先用 <code>document.querySelectorAll('th[data-field]') 找出所有带字段标识的表头，再按字段名匹配移除对应 th 和所有 tr > td:nth-child(n)
class="col-status"，然后 document.querySelectorAll('.col-status').forEach(el => el.remove())
td 的 textContent 可能含换行或空格，建议用 el.textContent.trim() 再渲染新值，避免视觉错位最容易被忽略的一步：字段删除不可逆，前端必须二次确认
数据库字段一旦删除，历史数据无法恢复。用户勾选 “id” 或 “email” 后点删除，不能只弹个 alert，得明确列出将被删除的字段名，并加粗高亮风险字段（如含 “_at”、“_by” 的时间/操作人字段）。
此外，如果当前页面还依赖这些字段做排序、搜索或导出，删完字段后相关 UI 元素（如筛选下拉、排序按钮）也应同步禁用或移除，否则用户操作会报 400 错误 —— 这不是交互问题，是状态未收敛。
