Js简单表格排序怎么弄

在网页中实现简单的表格排序，可以通过JavaScript来完成。 具体方法包括：利用事件监听器、获取表格数据、排序算法的实现、更新表格显示。 这里，我们将详细介绍如何实现这些步骤，并提供一些代码示例来帮助你快速上手。

一、利用事件监听器

在实现表格排序功能时，首先需要为表格的表头添加点击事件监听器。当用户点击表头时，触发对应的排序操作。

document.addEventListener('DOMContentLoaded', () => {
  const tableHeaders = document.querySelectorAll('th');
  tableHeaders.forEach(header => {
    header.addEventListener('click', () => {
      sortTable(header.cellIndex);
    });
  });
});

二、获取表格数据

为了进行排序，需要先获取表格中的数据。可以通过table元素的rows属性来获取所有行数据。

function getTableData(table) {
  const rows = table.rows;
  const data = [];
  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].cells;
    const rowData = [];
    for (let j = 0; j < cells.length; j++) {
      rowData.push(cells[j].innerText);
    }
    data.push(rowData);
  }
  return data;
}

三、排序算法的实现

对于不同类型的数据（如字符串、数字等），可以采用不同的排序算法。这里以简单的字符串和数字排序为例。

function sortData(data, columnIndex, isNumeric = false) {
  return data.sort((a, b) => {
    const valueA = isNumeric ? parseFloat(a[columnIndex]) : a[columnIndex];
    const valueB = isNumeric ? parseFloat(b[columnIndex]) : b[columnIndex];
    if (valueA < valueB) return -1;
    if (valueA > valueB) return 1;
    return 0;
  });
}

四、更新表格显示

在完成排序后，需要将排序后的数据更新回表格中。

function updateTable(table, sortedData) {
  const rows = table.rows;
  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].cells;
    for (let j = 0; j < cells.length; j++) {
      cells[j].innerText = sortedData[i-1][j];
    }
  }
}

五、综合实现

将上述步骤综合起来，形成完整的表格排序功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Sort</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>22</td>
        <td>B</td>
      </tr>
      <tr>
        <td>Smith</td>
        <td>28</td>
        <td>A</td>
      </tr>
    </tbody>
  </table>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tableHeaders = document.querySelectorAll('th');
      tableHeaders.forEach(header => {
        header.addEventListener('click', () => {
          sortTable(header.cellIndex);
        });
      });
    });
    function sortTable(columnIndex) {
      const table = document.querySelector('table');
      const data = getTableData(table);
      const isNumeric = !isNaN(data[0][columnIndex]);
      const sortedData = sortData(data, columnIndex, isNumeric);
      updateTable(table, sortedData);
    }
    function getTableData(table) {
      const rows = table.rows;
      const data = [];
      for (let i = 1; i < rows.length; i++) {
        const cells = rows[i].cells;
        const rowData = [];
        for (let j = 0; j < cells.length; j++) {
          rowData.push(cells[j].innerText);
        }
        data.push(rowData);
      }
      return data;
    }
    function sortData(data, columnIndex, isNumeric = false) {
      return data.sort((a, b) => {
        const valueA = isNumeric ? parseFloat(a[columnIndex]) : a[columnIndex];
        const valueB = isNumeric ? parseFloat(b[columnIndex]) : b[columnIndex];
        if (valueA < valueB) return -1;
        if (valueA > valueB) return 1;
        return 0;
      });
    }
    function updateTable(table, sortedData) {
      const rows = table.rows;
      for (let i = 1; i < rows.length; i++) {
        const cells = rows[i].cells;
        for (let j = 0; j < cells.length; j++) {
          cells[j].innerText = sortedData[i-1][j];
        }
      }
    }
  </script>
</body>
</html>

六、增强功能

为了使表格排序功能更加完善，还可以添加一些额外的功能，如：

双向排序：用户可以选择升序或降序排序。
复杂数据类型排序：如日期、货币等。
排序指示器：在表头显示当前排序状态。

let currentSortColumn = -1;
let isAscending = true;
function sortTable(columnIndex) {
  const table = document.querySelector('table');
  const data = getTableData(table);
  const isNumeric = !isNaN(data[0][columnIndex]);
  if (currentSortColumn === columnIndex) {
    isAscending = !isAscending;
  } else {
    currentSortColumn = columnIndex;
    isAscending = true;
  }
  const sortedData = sortData(data, columnIndex, isNumeric);
  if (!isAscending) sortedData.reverse();
  updateTable(table, sortedData);
}

总结

通过上述步骤，我们可以实现一个功能完善的表格排序功能。利用JavaScript的事件监听器、数据获取、排序算法和DOM操作，可以轻松地为任何表格添加排序功能。这不仅提高了用户体验，还使得数据展示更加直观和易于操作。