如何使用HTML表格做一个简单的记账本-html教程-PHP中文网

记账表格应采用语义化HTML结构：固定表头用，数据行用动态插入；金额列加class="amount"并统一格式化为两位小数、等宽字体右对齐；新增行须用createElement避免破坏DOM状态；数据需存localStorage且金额转数字防字符串拼接错误。

如何使用html表格做一个简单的记账本

表格结构怎么设计才方便记账

记账本的核心是「日期、收入、支出、备注」四列，但直接用

写死表头容易后续增删列或导出失败。推荐用语义化方式组织： 放固定表头（避免滚动时丢失） 只放数据行，方便 JS 动态插入新记录每行用 包裹，每单元格用 末尾新行里每个 里的

 都只是 DOM 节点，刷新页面就消失。这不是 bug，是 HTML 本身没持久化能力。  
临时方案：用 localStorage 存 JSON 数组，每次新增/删除都 JSON.stringify() 再写入  
注意：localStorage 只存字符串，金额字段必须转成数字再存，否则排序或求和会出错（比如 "100" + "20" 得到 "10020"）  
更现实的坑：浏览器隐私模式下 localStorage 可能被禁用，得提前用 try/catch 包住写入逻辑  

容易被忽略的是时间戳精度——如果记账频率高，单纯用 Date.now() 当 ID 可能重复，至少拼上毫秒级随机数：
const id = Date.now() + '-' + Math.random().toString(36).substr(2, 5);

，别用

填数据（语义错、样式难统一）

金额列建议加 class="amount"，后续 CSS 对齐或 JS 格式化更可靠

示例片段：

日期	收入	支出	备注
2024-06-01	500.00	0.00	工资

金额对齐和小数点怎么处理才不乱

HTML 表格默认左对齐，金额必须右对齐+等宽字体，否则小数点无法垂直对齐。常见错误是只设 text-align: right，结果「100.00」和「9.99」还是错位。

给 .amount 加 font-family: 'Consolas', 'Courier New', monospace
必须统一补零到两位小数（比如后端传来 123，前端显示前要转成 "123.00"）
别依赖的 value 直接塞进

，它可能返回整数或科学计数法字符串

JS 处理示例：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

function formatAmount(val) {
  return Number(val).toFixed(2);
}
// 用法：<td class="amount">${formatAmount(data.income)}</td>

新增一行记账记录的最小可行操作

用户点「+ 添加」后，不能靠 innerHTML += ... 拼接字符串——会清空已有 input 的 focus 状态，且破坏事件绑定。

用 document.createElement('tr') 创建新行
用 insertAdjacentElement('beforeend', tr) 插入到

的值从表单取，日期建议用 new Date().toISOString().split('T')[0] 自动生成

表单提交后立刻清空输入框，但别重置整个表单（会清掉日期控件的值）

关键点： - 表单字段名和表格列顺序要严格对应，比如收入字段叫 income，就往第二列

塞值 - 新增行不要带 contenteditable，编辑应走独立编辑行或双击触发，否则键盘操作易误触

为什么纯 HTML 表格存不住数据

所有写在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！