JavaScript面向对象表格排序案例分享

JavaScript面向对象表格排序案例分享

本文主要分享一个利用JavaScript实现表格排序的面向对象案例。这个案例不仅可供初学者学习JavaScript面向对象编程的思想，还能实现表格内容的自动排序。

首先，定义一个TableSort类，并在其原型对象中添加sort方法，该方法通过获取表格的thead和tbody元素以及指定的排序列，实现表格内容的自动排序功能。具体实现可参考代码块：

class TableSort {
  constructor(table) {
    this.table = table;
    this.thead = table.querySelector('thead');
    this.tbody = table.querySelector('tbody');
  }

  sort(index, order) {
    let rows = Array.from(this.tbody.rows);
    rows.sort((row1, row2) => {
      let cell1 = row1.cells[index].textContent.toLowerCase();
      let cell2 = row2.cells[index].textContent.toLowerCase();
      if (cell1 < cell2) return -1;
      if (cell1 > cell2) return 1;
      return 0;
    });
    if (order === 'desc') rows.reverse();
    for (let row of rows) {
      this.tbody.appendChild(row);
    }
  }
}

let table = document.querySelector('table');
let sorter = new TableSort(table);
sorter.sort(0, 'asc');

以上是一个简单的面向对象表格排序案例，希望对JavaScript初学者有所帮助。