点击按钮表格无反应的主因是事件绑定失效或DOM未加载完，应确保脚本置于</body>前或用DOMContentLoaded包裹；追加行须定位<tbody>并用insertRow()，避免innerHTML导致状态丢失；动态行交互需用事件委托，数据需同步更新JS内存而非仅存DOM。
点击按钮后表格没反应，检查事件绑定是否生效
常见情况是 document.getElementById 拿到的按钮为 null，或者 JS 执行时 DOM 还没加载完。确保脚本放在 </body> 前，或用 DOMContentLoaded 包裹：
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('addRowBtn');
if (!btn) return; // 避免报错中断
btn.addEventListener('click', addNewRow);
});别在 HTML 里写 onclick="addNewRow()" —— 容易因函数未定义或作用域问题失效，也难调试。
向 <tbody> 追加行，而不是直接 append 到 <table>
表格结构混乱（比如缺失 <tbody>）会导致新行插入位置错乱，甚至被浏览器自动修正成无效 DOM。务必确认目标表格有明确的 <tbody>：
<table id="data-table"> <thead><tr><th>姓名</th><th>年龄</th></tr></thead> <tbody><!-- 新行将插入到这里 --></tbody> </table>
追加逻辑应定位到 <tbody>：
立即学习“前端免费学习笔记（深入）”；
function addNewRow() {
const tbody = document.querySelector('#data-table tbody');
const newRow = tbody.insertRow(); // insertRow() 自动创建 <tr>
newRow.insertCell(0).textContent = '张三';
newRow.insertCell(1).textContent = '28';
}用 insertRow() 而不是 innerHTML += —— 后者会重绘整个 <tbody>，丢失已绑定的事件、输入框状态或 focus。
动态生成带输入框或事件的行，注意事件委托和引用管理
如果新行含 <input> 或删除按钮，直接给每个按钮绑 addEventListener 会导致内存泄漏（尤其反复添加），且新行按钮无法响应。
- 用事件委托：监听
<tbody>的click，再判断event.target.matches('.delete-btn') - 避免在循环中闭包捕获索引（如
for (let i = 0; ...)是安全的，但var i会出错） - 若需保存数据，别只存在 DOM 属性里（如
row.dataset.id），同步更新 JS 数组或 Map，否则删行后数据就丢了
示例：带删除按钮的行
const newRow = tbody.insertRow(); newRow.innerHTML = ` <td><input type="text" value="李四"></td> <td>32</td> <td><button class="delete-btn">删</button></td> `; // 删除逻辑由 tbody 统一处理，不单独绑定
IE 兼容性：insertRow() 和 insertCell() 在 IE8+ 都支持，但别用 append() 或 before()
老项目还要兼容 IE，就得避开现代 DOM 方法：
- ✅ 可用：
insertRow()、insertCell()、appendChild()（配合document.createElement） - ❌ 避免：
append()、before()、replaceChildren()—— IE 不支持 - ⚠️ 注意：
innerHTML在 IE 中对<table>子元素插入有严格限制，某些情况下会静默失败，优先走 DOM API
真正容易被忽略的是：表格行数变多后，频繁调用 insertRow() 本身没问题，但若每行都触发重排（比如带内联样式计算），性能会明显下降。批量插入建议用 DocumentFragment，不过单次追加一行，直接 insertRow() 最简单可靠。
