<tr>标签本身不支持动态渲染，需JavaScript或服务端配合实现排序与更新；常见错误包括DOM未加载完或tbody ID错误；推荐用sort()排序后批量生成HTML字符串并用innerHTML或insertAdjacentHTML写入tbody。
TR 标签本身不支持动态渲染，得靠 JavaScript 或服务端配合
<tr> 是纯静态 HTML 标签，它不会自动读取数据、排序或响应变化。所谓“动态排版”，实际是把 <tr> 当作容器，由外部逻辑（比如 JS 数组排序后重写 <tbody>）来控制其顺序和内容。
常见错误现象：Uncaught TypeError: Cannot set property 'innerHTML' of null —— 多因 <tbody id="sales-body"> 没写或 ID 拼错；或 JS 执行时 DOM 还没加载完。
- 确保
<tbody>有明确id或class，便于 JS 定位 - JS 脚本放在
</body>前，或用DOMContentLoaded包裹 - 不要直接操作
<tr>的innerHTML，而是批量生成字符串再一次性写入<tbody>，避免重复 reflow
用 sort() + innerHTML 生成带序号的销售排行 TR
假设原始数据是数组：[{name:"iPhone", sales:1280}, {name:"MacBook", sales:942}]，按 sales 降序排列并插入表格。
const data = [{name:"iPhone", sales:1280}, {name:"MacBook", sales:942}];
data.sort((a, b) => b.sales - a.sales);
<p>const rows = data.map((item, i) =>
<code><tr><td>${i+1}</td><td>${item.name}</td><td>${item.sales}</td></tr></code>
).join('');</p><p>document.getElementById('sales-body').innerHTML = rows;立即学习“前端免费学习笔记（深入）”；
注意点：
-
sort()是原地修改，如果原始顺序还需保留，先用[...data]浅拷贝 - 若
sales含小数或单位（如 "¥1,280.00"），需先转数字：parseFloat(item.sales.replace(/[^0-9.]/g, '')) - 直接拼接字符串易 XSS，若数据来自用户输入，必须用
textContent替代或做 HTML 转义
用 insertAdjacentHTML 避免 tbody 重绘闪烁
频繁更新排行榜时，全量替换 innerHTML 可能导致视觉跳动或焦点丢失（比如某行正被用户 hover）。insertAdjacentHTML 更轻量，适合增量更新。
例如只更新前三名，其余保持不变：
const top3 = data.slice(0, 3).map((item, i) =>
`<tr><td>${i+1}</td><td>${item.name}</td><td>${item.sales}</td></tr>`
).join('');
<p>const tbody = document.getElementById('sales-body');
tbody.innerHTML = ''; // 清空旧内容
tbody.insertAdjacentHTML('beforeend', top3);关键差异：
-
insertAdjacentHTML('beforeend', ...)等价于appendChild，但语法更紧凑 - 不能用
insertAdjacentHTML替换整个<tbody>内容——它只追加，清空仍需innerHTML = ''或textContent = '' - 如果表格启用了 CSS 动画（如
tr { transition: opacity 0.2s; }），建议加 class 控制显隐，而非直接删/增 DOM
移动端适配：TR 行内滚动 + 固定表头容易失效
当销售排行超过 10 行，又需在手机上横向滚动查看完整列，仅靠 <tr> 无法实现。常见错误是给 <table> 加 overflow-x: auto，结果整张表缩放变形，<tr> 仍换行。
真正可行的做法：
- 用
<div class="table-container"><table>...</table></div>包裹，对容器设overflow-x: auto - 给
<table>设min-width: max-content，防止列被压缩 - 固定表头需分离
<thead>和<tbody>，并用 JS 监听容器 scrollLeft 同步<thead>滚动（CSSposition: sticky在 iOS Safari 低版本中兼容性差）
别指望 <tr> 自己撑开宽度或响应滚动——它只是行容器，布局行为完全取决于父级 <table> 和 CSS。
