JS实现隔行换色的表格排序

JS实现隔行换色的表格排序包括以下几个步骤：

1. 获取表格元素
2. 获取表格头部元素，并绑定点击事件，当点击表头时触发排序功能
3. 解析表格数据，将数据存储到一个数组中，每一行数据为一个对象
4. 编写排序函数，根据表头点击事件触发的不同，采用不同的排序方式，例如按照数值大小从小到大或从大到小排序、按照字母表顺序排序等
5. 将排序后的数据重新渲染到表格中，并实现隔行换色的效果

以下是两个示例说明：

示例1：按照数字从小到大排序

// HTML代码：
<table id="myTable" border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th id="score">成绩</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>88</td>
      <td>27</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>76</td>
      <td>25</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>92</td>
      <td>29</td>
    </tr>
  </tbody>
</table>

// JS代码：
const table = document.getElementById("myTable");
const tableHead = table.getElementsByTagName("th");
const tableBody = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

// 将表格数据存储到一个数组中
let data = [];
for (let i = 0; i < tableBody.length; i++) {
  const rowData = {
    name: tableBody[i].getElementsByTagName("td")[0].textContent,
    score: tableBody[i].getElementsByTagName("td")[1].textContent,
    age: tableBody[i].getElementsByTagName("td")[2].textContent,
  };
  data.push(rowData);
}

// 给表头添加点击事件
tableHead[1].addEventListener("click", function() {
  // 按照成绩从小到大排序
  data.sort((a, b) => a.score - b.score);

  // 将排序后的数据重新渲染到表格中并实现隔行换色
  for (let i = 0; i < tableBody.length; i++) {
    tableBody[i].getElementsByTagName("td")[0].textContent = data[i].name;
    tableBody[i].getElementsByTagName("td")[1].textContent = data[i].score;
    tableBody[i].getElementsByTagName("td")[2].textContent = data[i].age;

    if (i % 2 === 0) {
      tableBody[i].style.backgroundColor = "#f2f2f2";
    } else {
      tableBody[i].style.backgroundColor = "#fff";
    }
  }
});

示例2：按照字母表顺序排序

// HTML代码：
<table id="myTable" border="1">
  <thead>
    <tr>
      <th id="name">姓名</th>
      <th>成绩</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>88</td>
      <td>27</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>76</td>
      <td>25</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>92</td>
      <td>29</td>
    </tr>
  </tbody>
</table>

// JS代码：
const table = document.getElementById("myTable");
const tableHead = table.getElementsByTagName("th");
const tableBody = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

// 将表格数据存储到一个数组中
let data = [];
for (let i = 0; i < tableBody.length; i++) {
  const rowData = {
    name: tableBody[i].getElementsByTagName("td")[0].textContent,
    score: tableBody[i].getElementsByTagName("td")[1].textContent,
    age: tableBody[i].getElementsByTagName("td")[2].textContent,
  };
  data.push(rowData);
}

// 给表头添加点击事件
tableHead[0].addEventListener("click", function() {
  // 按照姓名字母表顺序排序
  data.sort((a, b) => a.name.localeCompare(b.name));

  // 将排序后的数据重新渲染到表格中并实现隔行换色
  for (let i = 0; i < tableBody.length; i++) {
    tableBody[i].getElementsByTagName("td")[0].textContent = data[i].name;
    tableBody[i].getElementsByTagName("td")[1].textContent = data[i].score;
    tableBody[i].getElementsByTagName("td")[2].textContent = data[i].age;

    if (i % 2 === 0) {
      tableBody[i].style.backgroundColor = "#f2f2f2";
    } else {
      tableBody[i].style.backgroundColor = "#fff";
    }
  }
});