安全渲染的员工分页表格 · 在线演示

演示了什么：这个 Demo 让你亲眼看到一个员工表格如何在没有 CDN、没有框架的情况下完成搜索、分页、行选中和移动端横向滚动。它也展示了一个重要取舍：用户数据不直接拼进 innerHTML，而是用 DOM API 安全填充。

关键实现：

1. js 里的 cell() 和 renderRows() 多数位置使用 textContent 写入数据——这样姓名、邮箱等字段即使包含 HTML 片段，也只会被当成普通文字显示，避免依赖外部净化库。
2. js 里的 renderPages() 用 Math.min(page,max) 夹紧当前页——搜索后总页数会变化，不处理这个边界就会出现“明明有数据却显示空表”的错觉。
3. css 里的 .table-scroll{overflow:auto} 搭配 table{min-width:780px}——保留表格横向比较能力，窄屏时只滚动容器，不把列强行挤碎。

动手改一改：

1. 把 js 中 pageSize=5 改成 3，你会看到分页按钮变多，每页展示行数减少。
2. 把 css 中 table{min-width:780px} 改成 560px，在手机宽度下横向滚动会变少，但列内容也更容易拥挤。