最直接的方式是给<td>或<th>加id（如id="today"），再用document.getElementById('today').textContent=new Date().toLocaleDateString();填充，注意执行时机需defer或脚本置于表格后。
用 document.getElementById 直接写入表格单元格
最直接的方式是给目标 <td> 或 <th> 加一个 id，比如 id="today"，然后在 JS 中用 document.getElementById('today').textContent = new Date().toLocaleDateString(); 填充。注意别用 innerHTML，除非你确定内容不含 HTML 字符；纯日期字符串用 textContent 更安全、更轻量。
常见错误是脚本执行时机不对：如果 JS 写在 <head> 里且没加 defer，浏览器还没解析到表格元素，getElementById 就会返回 null，接着报错 Cannot set property 'textContent' of null。解决方法只有两个：defer 属性，或者把 script 放在表格之后（比如 </body> 前）。
用 querySelector 定位带 class 的单元格
如果你不想污染 HTML 结构（比如不能改已有 id），可以给单元格加个 class，例如 class="date-cell"，再用 document.querySelector('.date-cell') 获取。这种方式适合复用场景——比如一页多个表格都要填日期，每个都加 class 比加不同 id 更省事。
但要注意：querySelector 只返回第一个匹配项。如果页面有多个 .date-cell，它只会填第一个。需要批量填充就得用 querySelectorAll 配合 forEach：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.date-cell').forEach(cell => {
cell.textContent = new Date().toLocaleDateString('zh-CN');
});
toLocaleDateString('zh-CN') 是为了确保显示为「2024年6月12日」格式；不传参数时浏览器按本地设置，可能输出英文或斜杠分隔，不稳定。
避免 new Date() 在服务端渲染或静态 HTML 中失效
这个方案本质是客户端执行，所以每次用户刷新页面都会更新为“当前访问时刻”的日期。如果你把它用在 SSR（如 Next.js、Nuxt）或生成静态页的工具里，JS 还没执行前，单元格是空的——这对 SEO 或首屏体验可能有影响。此时不能依赖 JS 填充，得换思路：服务端注入，或预留占位符 + JS 回填。
容易被忽略的一点：new Date() 返回的是用户本地时区时间，不是服务器时间。如果业务要求统一用东八区时间（比如日志归档、报表截止），不能只靠 toLocaleDateString，得手动处理时区偏移，或用 Intl.DateTimeFormat 显式指定 timeZone: 'Asia/Shanghai'。
表格结构变化时脚本容易挂掉
脚本强依赖 DOM 结构。比如你用 querySelector('table tr:last-child td:first-child') 这种路径方式定位，一旦表格加了标题行、合并单元格、或后端动态插入新行，定位就失效。这种写法看着短，维护成本极高。
推荐做法始终围绕语义化标识：
- 必须加
- 避免用层级路径（如
table > tbody > tr:nth-child(2) > td）； - 如果表格由框架（Vue/React）渲染，优先用响应式数据绑定，而不是手动 DOM 操作。
id 或 class；真正麻烦的不是“怎么填”，而是“填完以后要不要随时间自动更新”。如果只是展示“页面加载当天”，那就一次赋值完事；如果要每秒刷新（比如倒计时），就得用 setInterval，但表格单元格频繁重绘可能引发性能抖动，尤其是大表格里混用该逻辑时。
