如何实现以第一个表格为基准的两个表格同步排序？

嘿，我完全get到你的需求了——点击排序按钮后，左边表格按名称排好序，右边表格的行也得跟着对应调整位置对吧？这其实不难，核心思路是给两个表格的对应行加上唯一关联标识，然后根据左边的排序结果重新排列右边的行。下面给你完整的实现方案：

第一步：给表格行添加关联标识 #

首先要确保左右两个表格的对应行有相同的唯一标识，这里我用data-id属性来实现，这样就能明确哪两行是配对的：

<div class="flex-table">
  <table class="table-left">
    <thead>
      <tr>
        <th>名称</th>
        <th>数值</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="1">
        <td>香蕉</td>
        <td>5</td>
      </tr>
      <tr data-id="2">
        <td>苹果</td>
        <td>3</td>
      </tr>
      <tr data-id="3">
        <td>橙子</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>
  
  <table class="table-right">
    <thead>
      <tr>
        <th>描述</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="1">
        <td>黄色水果</td>
        <td>2.5</td>
      </tr>
      <tr data-id="2">
        <td>红色水果</td>
        <td>3.0</td>
      </tr>
      <tr data-id="3">
        <td>橙色水果</td>
        <td>1.8</td>
      </tr>
    </tbody>
  </table>
</div>

<button class="sort">按名称排序</button>

第二步：补全CSS样式（完善你的代码） #

.flex-table {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

table {
  border-collapse: collapse;
  width: 200px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

第三步：实现同步排序的JavaScript逻辑 #

这部分是核心，我帮你补全了点击事件里的代码，注释写得很清楚：

$(document).ready(function() {
  var $tableLeft = $('.table-left tbody'),
      $tableRight = $('.table-right tbody'),
      $sortButton = $('.sort');

  $sortButton.on('click', function() {
    // 1. 提取左边表格的行数据：名称、关联ID、原始DOM元素
    var rows = $tableLeft.find('tr').map(function() {
      return {
        name: $(this).find('td:first').text().trim(),
        id: $(this).data('id'),
        element: this // 保存原始行元素，避免重新创建DOM
      };
    }).get();

    // 2. 按名称进行升序排序（localeCompare支持中文等多语言排序）
    rows.sort(function(a, b) {
      return a.name.localeCompare(b.name);
    });

    // 3. 重新排列左边表格的行
    $tableLeft.empty();
    rows.forEach(function(row) {
      $tableLeft.append(row.element);
    });

    // 4. 根据排序后的ID顺序，同步排列右边表格的行
    $tableRight.empty();
    rows.forEach(function(row) {
      var rightRow = $('.table-right tr[data-id="' + row.id + '"]');
      $tableRight.append(rightRow);
    });
  });
});

关键细节说明 #

• data-id的作用：这是左右行关联的核心，不管初始顺序怎么变，只要ID对应，就能精准匹配。
• localeCompare方法：比普通的字符串排序更友好，能正确处理中文、特殊字符的排序逻辑。
• 复用原始DOM元素：直接移动已有的行元素，比重新创建DOM性能更好，也能保留行上可能存在的其他事件或属性。

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