最简方式是在中直接写，避免；用this.closest('tr')获取所在行；禁用内联事件，排查disabled、pointer-events和js执行时机；统一box-sizing、font-size和vertical-align确保对齐。
直接在 <td> 里写 <code><button></button> 就行
不需要额外容器、不用 JS 动态插入，最简方式就是把按钮标签原样塞进单元格。浏览器会自动处理布局和行内流式渲染，<button></button> 默认是 display: inline-block，能自然对齐文本和其他表单控件。
常见错误是误用 <input type="button"> —— 它不支持嵌套内容，也不如 <button></button> 语义清晰、可访问性好。除非要兼容 IE8 及更老版本，否则一律优先选 <button></button>。
- 必须显式设置
type="button"，否则在<form></form>内点击会意外触发表单提交 - 别依赖默认边框和背景色，至少加
border: none; background: transparent;再自定义 - 如果按钮文字和输入框高度不一致，检查是否漏了
box-sizing: border-box;或字体大小未统一
按钮点击后要操作当前行？用 this 找父级 <tr><p>每个按钮绑定 click 事件时，<code>this 指向自身，往上找两层就能拿到所在行：this.closest('tr') 是现代写法，兼容性好；旧写法可用 this.parentNode.parentNode，但易出错（比如中间有 <div> 包裹就会断链）。
<p>别用 <code>rowIndex 或硬编码索引——动态增删行后序号会变，靠 DOM 结构定位更稳。
-
this.closest('tr') 返回最近的祖先 <tr>，即使表格嵌套或含 <code><tbody> 也可靠
<li>获取单元格值建议用 <code>row.querySelector('input').value 而非 cells[0].textContent，因为输入框内容不在 textContent 里
- 避免在按钮里写
onclick="doSomething(this)" 内联脚本，改用 addEventListener 统一管理更利于维护
按钮被遮挡、点不动？先查三件事
90% 的“按钮没反应”不是逻辑错，而是渲染层问题。打开开发者工具，快速排查：
- 检查是否加了
disabled 属性：哪怕只是 disabled="" 或 disabled="false"，都会让按钮失效（布尔属性有即生效）
- 看上层元素有没有
pointer-events: none，或者 z-index 过低被其他浮层盖住（尤其弹窗、固定导航栏下方）
- 确认 JS 执行时机：如果脚本放在
defer，DOM 还没加载完就去绑事件，querySelector 会返回 null
样式对不齐？重点调 vertical-align 和 line-height
表格单元格默认 vertical-align: middle，但按钮内部文字基线和 input 不同，容易看起来偏高或偏低。单纯设 height 不够，得配合对齐控制。
-
button { vertical-align: middle; } 让按钮整体垂直居中，比设 line-height 更稳妥
- 如果按钮里放图标（
<svg></svg>），记得给图标加 vertical-align: -0.125em 微调基线
- 避免用
margin-top 硬拉，会导致不同分辨率下错位；用 padding 控制内部空间更可控
复杂点在于混合使用 <input> 和 <button></button> 时，它们的默认盒模型和字体继承规则不一致，同一行内并排出现时，哪怕 CSS 写得一样，高度也可能差 1–2px —— 这时候统一用 box-sizing: border-box + 显式 font-size + line-height 才能真正对齐。
this.closest('tr') 返回最近的祖先 <tr>，即使表格嵌套或含 <code><tbody> 也可靠
<li>获取单元格值建议用 <code>row.querySelector('input').value 而非 cells[0].textContent，因为输入框内容不在 textContent 里onclick="doSomething(this)" 内联脚本，改用 addEventListener 统一管理更利于维护按钮被遮挡、点不动？先查三件事
90% 的“按钮没反应”不是逻辑错，而是渲染层问题。打开开发者工具，快速排查：
- 检查是否加了
disabled属性：哪怕只是disabled=""或disabled="false"，都会让按钮失效（布尔属性有即生效） - 看上层元素有没有
pointer-events: none，或者z-index过低被其他浮层盖住（尤其弹窗、固定导航栏下方） - 确认 JS 执行时机：如果脚本放在
里且没加defer，DOM 还没加载完就去绑事件，querySelector会返回null
样式对不齐？重点调 vertical-align 和 line-height
表格单元格默认 vertical-align: middle，但按钮内部文字基线和 input 不同，容易看起来偏高或偏低。单纯设 height 不够，得配合对齐控制。
-
button { vertical-align: middle; }让按钮整体垂直居中，比设line-height更稳妥 - 如果按钮里放图标（
<svg></svg>），记得给图标加vertical-align: -0.125em微调基线 - 避免用
margin-top硬拉，会导致不同分辨率下错位；用padding控制内部空间更可控
复杂点在于混合使用 <input> 和 <button></button> 时，它们的默认盒模型和字体继承规则不一致，同一行内并排出现时，哪怕 CSS 写得一样，高度也可能差 1–2px —— 这时候统一用 box-sizing: border-box + 显式 font-size + line-height 才能真正对齐。
