用table渲染单元格，JS监听鼠标事件维护selectedCells数组，工具栏按钮操作带cell-selected类的td元素，样式通过内联style控制，注意选区同步与CSS优先级冲突。
怎么用 HTML + JavaScript 实现基础电子表格工具栏
纯 HTML 无法实现可交互的电子表格工具栏，必须配合 contenteditable 或 canvas / table + JS 控制逻辑。最实用、兼容性最好、开发成本最低的路径是：用 table 渲染格子，用原生 DOM 操作 + 简单状态管理模拟选区和命令，工具栏按钮触发对应操作。
- 不要试图用
iframe嵌套 Excel 或依赖服务端渲染——延迟高、不可控、移动端基本废掉 - 避免一上来就集成 SheetJS 或 Handsontable——小项目引入几十 KB 代码得不偿失
- 工具栏按钮本质就是调用函数，比如
boldText()、mergeCells()、setBackgroundColor()，所有样式变更最终落到td或th元素的style属性或 class 上
如何让工具栏按钮真正影响选中的单元格
关键不是“点按钮”，而是“知道当前选中了哪些 td”。浏览器原生不提供表格选区 API，得自己监听鼠标/键盘事件并维护一个 selectedCells 数组。
- 监听
mousedown在table上，配合mousemove+mouseup实现拖选（类似 Excel 的框选） - 每次选中更新时，给这些
td加临时 class（如cell-selected），工具栏操作只作用于带该 class 的元素 - 注意：
document.getSelection()对table内容无效，别白费劲 - 合并单元格必须手动修改
rowspan/colspan并移除被合并的单元格内容，不能只改样式
字体加粗、居中、背景色等基础格式怎么落地
没有“格式刷”概念，只有对 DOM 节点的直接 style 操作。优先用内联 style，避免 class 冲突；批量操作前先缓存节点，减少重排。
-
fontWeight: 'bold'比fontStyle: 'normal'更可靠，有些字体不支持font-weight: 700数值写法 - 文本居中统一用
textAlign: 'center'，别混用align="center"属性（HTML 属性已废弃且不覆盖 CSS） - 背景色建议用
rgb()或十六进制，避免transparent导致后续颜色叠加异常 - 输入框编辑模式下（比如双击进入编辑），要临时移除格式样式，否则光标错位、文字截断
为什么点击工具栏没反应？常见卡点在哪
90% 的问题出在「没真正拿到选区」或「样式被更高优先级 CSS 覆盖」。
立即学习“前端免费学习笔记（深入）”；
- 检查是否忘了给
td设置position: relative——某些绝对定位工具栏浮层会遮挡点击 - 确认工具栏按钮绑定的是
click而非input或change（后者只适用于input元素） - 用
console.log(document.querySelectorAll('.cell-selected'))验证选区是否为空——空数组说明选区逻辑没跑通 - CSS 中写了
!important？JS 设置的style.backgroundColor会被它干掉，要么删!important，要么 JS 也加!important（用element.style.cssText += 'background-color: #ff0 !important;'）
真正的难点不在按钮长什么样，而在「选区状态同步」和「撤销/重做边界控制」——比如合并后再取消合并，要能还原原始行列结构，这需要记录操作快照，不是加个 style 就完事的。
