如何使用jQuery实现表格及对应标题按数字列联动排序

算力阿峰

2026-10-1

问题原因

你现有的DOM结构中，表名（.head元素）和对应表格（.box元素）是同级独立节点，现有代码仅对表格节点做了排序移动，表名节点没有同步处理，因此无法跟着表格一起调整顺序。

解决方案

这里提供两种可直接复用的方案：

方案1：调整DOM结构（推荐，后续维护更简单）

将每组表名和对应表格包裹在同一个父容器中，排序时直接操作父容器即可：

修改HTML结构，给每一组表名+表格加外层容器：

<div id="container">
  <!-- 每组都套一个table-group容器 -->
  <div class="table-group">
    <div class="head">Table 1</div>
    <table border=2px class="box">
      <tr>
        <td class="name">mui</td>
        <td class="number">4512</td>
      </tr>
    </table>
  </div>
  <div class="table-group">
    <div class="head">Table 2</div>
    <table border=2px class="box">
      <tr>
        <td class="name">oinecellars</td>
        <td class="number">566</td>
      </tr>
    </table>
  </div>
  <!-- 剩下的9组都按上面的格式套上table-group即可 -->
</div>

修改JS逻辑，直接排序外层容器：

$('#alphBnt').on('click', function() {
  $(".table-group").sort((a, b) => {
    return $(a).find(".number").text() - $(b).find(".number").text()
  }).appendTo("#container")
});

方案2：不改现有HTML，仅调整JS逻辑

如果不想修改现有HTML结构，可以在排序完表格后，同步把对应表名移到表格前面：

$('#alphBnt').on('click', function() {
  $(".box").sort((a, b) => {
    return $(a).find(".number").text() - $(b).find(".number").text()
  }).each(function() {
    // 取当前表格的前一个表名节点，插到当前表格前面
    $(this).prev('.head').insertBefore($(this))
  }).appendTo("#container")
});