如何使用jQuery按自定义列对表进行排序

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<table>
  <thead>
    <tr>
      <th class="sortable">列1</th>
      <th class="sortable">列2</th>
      <th class="sortable">列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>值1</td>
      <td>值2</td>
      <td>值3</td>
    </tr>
    <!-- 其他行... -->
  </tbody>
</table>

$(document).ready(function() {
  $('.sortable').click(function() {
    var columnIndex = $(this).index();
    var sortOrder = $(this).data('sort-order') || 'asc';

    // 切换排序顺序
    if (sortOrder === 'asc') {
      $(this).data('sort-order', 'desc');
    } else {
      $(this).data('sort-order', 'asc');
    }

    // 获取表格行并进行排序
    var $table = $(this).closest('table');
    var $tbody = $table.find('tbody');
    var $rows = $tbody.find('tr').toArray();

    $rows.sort(function(a, b) {
      var aValue = $(a).find('td').eq(columnIndex).text();
      var bValue = $(b).find('td').eq(columnIndex).text();

      if (sortOrder === 'asc') {
        return aValue.localeCompare(bValue);
      } else {
        return bValue.localeCompare(aValue);
      }
    });

    // 更新表格行的顺序
    $tbody.empty().append($rows);
  });
});