如何使用jQuery反转动态HTML表格的行顺序

嘿，我懂你遇到的问题了——每次用jQuery往表格里加新行，结果最新的内容跑到最下面，和你期望的「最新内容在最上方」完全反了对吧？这其实是因为你用错了追加方法，再加上HTML结构有点小问题，咱们一步步来解决：

第一步：先修正你的HTML表格结构 #

你原来的代码里<tbody>直接包裹<table>是错误的，正确的表格层级应该是<table>包含<thead>（放表头）和<tbody>（放数据行），调整后的结构如下：

<table align="center" style="width:auto" id="ex-table">
  <thead>
    <tr>
      <th><center>Date of join</center></th>
      <th><center>name</center></th>
      <th><center>designation...</center></th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 这里用来存放你的数据行 -->
  </tbody>
</table>

小提示：<center>标签现在已经不推荐使用了，你可以给<th>加CSS样式text-align: center来实现居中效果，不过先按你的习惯来也没问题~

第二步：用正确的jQuery方法追加新行 #

你之前应该是用了append()方法，这个方法会把新元素加到目标容器的末尾，所以最新的行总是排在最后。要实现「最新内容在最上方」的效果，咱们换成prepend()方法，它会把新元素加到目标容器的最前面。

举个例子，假设你生成新行的代码是这样的：

// 生成一条新的表格行（比如「刚刚发布」的内容）
var newRow = '<tr><td><center>刚刚发布</center></td><td><center>张三</center></td><td><center>工程师</center></td></tr>';

// 把新行加到tbody的最前面
$('#table-body').prepend(newRow);

这样每次生成的新行都会排在所有已有行的上方，正好符合你要的顺序：第一行是刚刚发布的内容，第二行是1分钟前的，第三行是2分钟前的。

备选方案：用insertBefore()实现 #

如果你不想用prepend()，也可以用insertBefore()方法，把新行插到tbody里的第一行前面：

$(newRow).insertBefore('#table-body tr:first');

效果和prepend()是一样的，选你觉得顺手的就行~

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