HTML表格无法自动计算执行率、超支金额等动态指标，必须用JavaScript处理：将预算数据存为数组，用map生成<tr>，执行率=(actual/budget*100).toFixed(1)+"%"并防除零，超支额用actual-budget并负数标红，表头固定用<thead><tbody>结构。
预算数据表格怎么用 HTML + JavaScript 动态渲染
纯 HTML 静态页面没法算“执行率”“超支金额”这类动态指标，必须结合 JavaScript 处理计算逻辑。常见错误是把所有数据硬编码在 <table> 里，导致后续调整科目、追加月份时要改十几处 <td> —— 一动全错。
推荐做法：用 Array 存原始数据（如 [{dept: "研发部", budget: 120000, actual: 132500, month: "2024-03"}]），用 map() 生成 <tr>，关键字段用 toFixed(2) 控制小数位，避免 120000.00000000001 这类浮点误差。
- 执行率 =
(actual / budget * 100).toFixed(1) + "%"，注意加budget !== 0判断防除零 - 超支/结余列用
actual - budget，负数标红用style="color: #d32f2f"，别依赖 CSS 类——简单页面直接内联更可控 - 表头固定用
<thead>+<tbody>结构，否则滚动时表头会消失
怎么让预算对比柱状图不卡顿又兼容老浏览器
用 Chart.js 渲染部门预算 vs 实际对比图很常见，但默认配置在 IE11 或低端安卓 WebView 里会白屏或报 Promise is not defined。这不是图没画出来，是脚本根本没跑起来。
真正能落地的方案是：放弃 import 写法，用 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> 引 v2.9.4（最后支持 IE 的稳定版），配色用 ["#2196f3", "#4caf50"] 这类基础色值，禁用 animation 和 tooltips.mode: 'index' 这些高开销特性。
立即学习“前端免费学习笔记（深入）”；
- 数据源必须是二维数组：
budgets: [120000, 95000, 80000]，不是对象数组，否则Chart.jsv2 不认 - 横轴标签过长（如“2024年第一季度市场推广专项预算”）会导致重叠，用
scales.xAxes[0].ticks.maxRotation = 0强制水平显示 - 移动端宽度不足时，
responsive: true必须配合maintainAspectRatio: false，否则图表会被压扁
部门筛选下拉框怎么联动刷新数据且不闪屏
用户点“财务部”后整页 location.reload() 是最差解法——页面白一下，刚展开的折叠面板也收了，体验像退回到 2005 年。正确路径是只替换 <tbody> 内容，保留 DOM 结构和用户操作状态。
核心是监听 select 的 change 事件，用 filter() 筛出对应部门数据，再调用一个独立的 renderTableBody(data) 函数。别把渲染逻辑塞进事件回调里，否则调试时找不到函数名。
- 初始加载时用
document.getElementById("dept-select").value = "all"设默认值，别靠 HTML 的selected属性——JS 初始化后它可能被覆盖 - 筛选后清空原
<tbody>用innerHTML = ""，比循环removeChild()快得多，且无兼容性问题 - 如果后端接口返回带分页的数据，前端筛选前先
if (data.length === 0) { showEmptyState() }，别留个空表格让用户干瞪眼
导出 Excel 为什么打开全是乱码，怎么修
用 table2excel 或手动拼 CSV 导出时出现“æŸéƒ¨é—¨”这种乱码，99% 是没声明 UTF-8 BOM。Excel 默认用系统 locale 解码，Windows 中文版认 GBK，但网页发的是 UTF-8 字节流，不加标记就必然错。
救急写法：导出前给 CSV 字符串开头加 \uFEFF（即 BOM 字节），用 new Blob(["\uFEFF" + csvContent], {type: "text/csv;charset=utf-8"}) 包装。别信“改 meta charset”或“服务器加 header”，客户端生成的文件，服务端根本没参与。
- 字段含逗号、换行符时，必须用双引号包裹该字段，例如
"市场部,上海"，否则 Excel 会错列为两列 - 日期字段（如
2024-03-15）导出后可能被 Excel 自动转成 3 月 15 日格式，若需保持文本，前置单引号：'2024-03-15 - 用
a.download触发下载时，Chrome 115+ 对跨域 Blob 有限制，本地测试务必起python3 -m http.server，别直接双击 HTML 文件
预算页面真正的难点不在画表格或出图表，而在于数据变更时各模块如何响应：筛选影响图表范围，导出要同步当前筛选结果，编辑单元格还得校验数值合法性。这些耦合点不提前用函数拆解、不约定好数据流向，后面加个“同比分析”功能就能重构三天。
