js怎么实现页面数据排序 要求table里的第一列不参加排序？？

Question

js怎么实现页面数据排序 要求table里的第一列不参加排序、？？

Answer 1

在实现页面数据排序时，可以使用 JavaScript 来动态改变表格中数据的顺序。下面是一个简单的按照其中的某一列排序的示例代码，对于第一列不排序的情况，可以在排序时指定要排序的数据列，而不包括第一列。

<table id="data-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Lucy</td>
      <td>23</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jack</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>27</td>
      <td>Tokyo</td>
    </tr>
  </tbody>
</table>

<script>
  var table = document.getElementById('data-table');
  var rows = table.rows;
  var sortingColumnIndex = 2;
  
  function sortTable() {
    var sortedRows = Array.from(rows).slice(1); // 第一行不参与排序
    sortedRows.sort(function(rowA, rowB) {
      var cellA = rowA.cells[sortingColumnIndex].textContent;
      var cellB = rowB.cells[sortingColumnIndex].textContent;
      return cellA.localeCompare(cellB); // 按照内容进行排序
    });
    for (var i = 0; i < sortedRows.length; i++) {
      table.tBodies[0].appendChild(sortedRows[i]); // 更新表格中的排序后的行
    }
  }
  
  function resetTable() {
    for (var i = 1; i < rows.length; i++) {
      table.tBodies[0].appendChild(rows[i]); // 将表格行重新排序为文档顺序
    }
  }
  
  table.addEventListener('click', function(event) {
    if (event.target.tagName === 'TH' && event.target.cellIndex !== 0) { // 第一列不参与排序
      sortingColumnIndex = event.target.cellIndex;
      sortTable();
    }
  });
</script>

在上述代码中，我们首先获取了表格对象、表格行以及指定要排序的数据列。然后，我们定义了 sortTable 和 resetTable 函数，用于执行表格数据排序和清除排序状态。在 click 事件处理函数中，我们判断是否点击了表格头部的单元格，并且排除了第一列，然后更新排序的列，并执行 sortTable 函数来动态改变表格中数据的排列顺序。