如何通过JavaScript或CSS反转智能合约事件驱动的HTML表格条目显示顺序

这问题我之前做Web3项目的时候也碰到过，其实不用绕弯子，用JavaScript直接调整插入位置，或者用CSS视觉反转都能搞定，给你两种实用方案：

方案一：JavaScript直接插入到表格顶部（推荐） #

你之前的代码是用appendChild把新行加到tbody的最后，这就是最新提案在最下面的原因。只要改成把新行插入到tbody的最前面就行，有两种简单的写法：

写法1：使用prepend方法（现代浏览器支持，最简洁） #

修改proposalListener函数里的最后一行：

// 原来的代码：
tbody.appendChild(tr);

// 改成：
tbody.prepend(tr);

prepend是DOM元素的原生方法，直接把新元素添加到父元素的第一个子节点位置，完美实现最新提案在最顶部。

写法2：使用insertBefore（兼容性更好，适合老浏览器） #

如果需要兼容更旧的浏览器，用这个写法：

// 原来的代码：
tbody.appendChild(tr);

// 改成：
tbody.insertBefore(tr, tbody.firstChild);

这个方法的逻辑是：把新创建的tr插入到tbody的第一个子元素之前，同样能让新行出现在最顶部。

方案二：CSS视觉反转（仅视觉效果） #

如果你不想改动JS逻辑，只想通过CSS让表格看起来是反转的，可以用flexbox，但要注意表格的默认布局特性，得修改tbody的display属性：

#proposalCreatedEvent tbody {
  display: flex;
  flex-direction: column-reverse;
  width: 100%; /* 保持表格宽度和原来一致 */
}

#proposalCreatedEvent tbody tr {
  flex: 0 0 auto; /* 防止表格行被拉伸变形 */
  display: table-row; /* 保留原生表格行的样式，避免布局错乱 */
}

⚠️ 注意：这个方案只是视觉上反转，DOM里的顺序还是旧行在前、新行在后。如果需要考虑SEO或者屏幕阅读器的可用性，优先选方案一。

为什么你之前的尝试没成功？ #

• reversed属性是给<ol>有序列表用的，表格不支持这个属性，所以没用；
• 之前用flexbox没生效，大概率是没把tbody的display改成flex，默认表格的display: table会覆盖flex布局的设置，所以必须修改tbody的display属性才行。

内容的提问来源于stack exchange，提问作者normal_human