当前位置：首页 > JavaScript

js如何实现点击排序

2026-04-04 16:55:39JavaScript

实现点击排序的方法

在JavaScript中实现点击排序功能，通常需要结合HTML表格或列表结构，通过事件监听和数组排序完成。以下是常见的实现方式：

基础表格排序实现

HTML结构示例

js如何实现点击排序

<table id="sortable-table">
  <thead>
    <tr>
      <th data-sort="name">姓名</th>
      <th data-sort="age">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td></tr>
    <tr><td>李四</td><td>30</td></tr>
  </tbody>
</table>

JavaScript实现

document.querySelectorAll('#sortable-table th[data-sort]').forEach(header => {
  header.addEventListener('click', () => {
    const sortKey = header.dataset.sort;
    const rows = Array.from(document.querySelectorAll('#sortable-table tbody tr'));

    rows.sort((a, b) => {
      const aVal = a.cells[header.cellIndex].textContent;
      const bVal = b.cells[header.cellIndex].textContent;
      return aVal.localeCompare(bVal);
    });

    const tbody = document.querySelector('#sortable-table tbody');
    rows.forEach(row => tbody.appendChild(row));
  });
});

支持升序/降序切换

扩展基础实现，增加排序方向控制：

js如何实现点击排序

let currentSort = { key: null, direction: 1 }; // 1=asc, -1=desc

document.querySelectorAll('#sortable-table th[data-sort]').forEach(header => {
  header.addEventListener('click', () => {
    const sortKey = header.dataset.sort;
    if (currentSort.key === sortKey) {
      currentSort.direction *= -1;
    } else {
      currentSort = { key: sortKey, direction: 1 };
    }

    const rows = Array.from(document.querySelectorAll('#sortable-table tbody tr'));

    rows.sort((a, b) => {
      const aVal = a.cells[header.cellIndex].textContent;
      const bVal = b.cells[header.cellIndex].textContent;
      return aVal.localeCompare(bVal) * currentSort.direction;
    });

    const tbody = document.querySelector('#sortable-table tbody');
    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));
  });
});

数字类型特殊处理

对于数字列需要单独处理比较逻辑：

rows.sort((a, b) => {
  const aVal = a.cells[header.cellIndex].textContent;
  const bVal = b.cells[header.cellIndex].textContent;

  if (header.dataset.type === 'number') {
    return (parseFloat(aVal) - parseFloat(bVal)) * currentSort.direction;
  }
  return aVal.localeCompare(bVal) * currentSort.direction;
});

使用数据集对象排序

如果数据源是JavaScript对象数组，可先排序再重新渲染：

const data = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 }
];

function renderTable() {
  const tbody = document.querySelector('#sortable-table tbody');
  tbody.innerHTML = data.map(item => `
    <tr><td>${item.name}</td><td>${item.age}</td></tr>
  `).join('');
}

document.querySelectorAll('#sortable-table th[data-sort]').forEach(header => {
  header.addEventListener('click', () => {
    const sortKey = header.dataset.sort;
    data.sort((a, b) => {
      if (header.dataset.type === 'number') {
        return (a[sortKey] - b[sortKey]) * currentSort.direction;
      }
      return String(a[sortKey]).localeCompare(String(b[sortKey])) * currentSort.direction;
    });
    renderTable();
  });
});