TR标签本身不支持自动排序，必须通过JavaScript或后端预先排序数据再生成TR；动态更新时需清空tbody并重写，避免innerHTML+=导致重复；排名应通过data-rank属性动态绑定样式，而非硬编码class或nth-child()。
TR 标签本身不支持自动排序，必须靠 JS 或后端生成顺序
HTML 的 <tr> 是纯静态容器，它不会按销售额大小重排行顺序。所谓“动态排名”，实际是把数据排好序后，再逐条生成 <code><tr> —— 浏览器渲染时只是忠实地按 DOM 顺序画表格，没有内置排序逻辑。
<p>常见错误是试图用 CSS 或属性（比如 <code>data-rank）让 <tr> 自己“动起来”，结果发现点击按钮没反应、排名不变——因为没绑定任何排序逻辑。
<ul><li>真正生效的排序发生在：JavaScript 调用 <code>Array.sort() 后重新拼接 HTML 字符串，或操作 DocumentFragment 替换 <tbody> 子节点
<li>服务端渲染更简单：PHP/Python 把数据排好，循环输出 <code><tr>，浏览器拿到的就是已排序的 DOM
<li>如果用框架（如 Vue/React），排序由响应式数据驱动，<code><tr> 是模板渲染结果，不是控制主体
<h3>用 JavaScript 动态更新 TR 排序时，避免直接 innerHTML += 拼接</h3>
<p>很多人写 <code>tableBody.innerHTML += '<tr>...</tr>' 来追加行，但用于重排就会出问题：旧 <tr> 不会被清除，新旧混杂，排名错乱甚至重复。
<p>正确做法是清空再重写：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class="brush:php;toolbar:false;">const tbody = document.querySelector('#sales-table tbody');
// 先清空
tbody.innerHTML = '';
// 再按排序后数组生成 TR
sortedData.forEach((item, index) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${index + 1}</td>
<td>${item.name}</td>
<td>${item.amount}</td>
`;
tbody.appendChild(tr);
});</pre>
<ul>
<li>用 <code>innerHTML = '' 或 textContent = '' 清空比 removeChild 循环更简洁安全
index + 1 是显示排名，不是原始数组下标；排序后它才真正对应名次appendChild 动态创建时需重新绑定，或改用事件委托绑定到 <tbody>
<h3>TR 中显示排名数字，别硬编码 class 名称如 rank-1 / rank-2</h3>
<p>有人给每行写死 <code>class="rank-1"、class="rank-2"，后续增删数据或重排时样式就失效了——CSS 类名和实际名次脱钩。
更可靠的方式是用数据属性 + CSS 选择器：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<tr data-rank="1"><td>1</td><td>iPhone</td></tr> <tr data-rank="2"><td>2</td><td>MacBook</td></tr>
配合 CSS：
[data-rank="1"] { background: #ffd700; }
[data-rank="2"] { background: #c0c0c0; }
[data-rank="3"] { background: #cd7f32; }
-
data-rank值随 JS 排序实时更新，样式自动匹配当前名次 - 避免用
nth-child()实现奖牌色——它只认 DOM 位置，不认业务意义；插入新行或过滤后就错位 - 若需兼容老浏览器（IE），
data-属性仍可用，但不要依赖:has()等新特性
移动端小屏下 TR 排名列容易挤压内容，优先保证销售额可读
在窄屏上，强行保留“排名”列（尤其带图标或 badge）会把商品名截断成“iPhone X...”，用户根本看不出卖的是什么。
- 用
@media隐藏排名列：@media (max-width: 480px) { .rank-col { display: none; } } - 或把排名融合进首列文字：
<td> <strong>1.</strong> iPhone</td>，用white-space: nowrap防折行 - 绝对不要用
font-size: 0.6rem强撑四列表格——小字+小间距=阅读困难 - 如果数据量大（>20 行），考虑分页或虚拟滚动；否则一次渲染太多
<tr> 会导致页面卡顿 <p>排名是辅助信息，销售额和商品名才是核心。TR 的结构得为内容服务，而不是为“看起来像排行榜”服务。</p> </tr>
