JS数据表对隐藏列进行排序 - Javascript

在数据表中，有时候我们需要对某些列进行隐藏，但是在排序时又需要考虑这些列。在JS中，我们可以通过一些技巧来实现对隐藏列的排序。

代码实现

以下是针对只有一列隐藏的情况的代码实现：

function sortTable(table, column, asc) {
  const tbody = table.getElementsByTagName('tbody')[0];
  const rows = Array.from(tbody.getElementsByTagName('tr'));

  // 如果隐藏列在排序列前面，则需要对列数进行调整
  const adjust = column > 0 ? 1 : 0;
  const sortColumn = column + adjust;

  // 获取隐藏列的值
  const hiddenValues = rows.map((row) => row.cells[column].textContent.trim());
  
  // 根据排序列进行排序
  rows.sort((a, b) => {
    const aValue = a.cells[sortColumn].textContent.trim();
    const bValue = b.cells[sortColumn].textContent.trim();
    
    if (aValue < bValue) return asc ? -1 : 1;
    else if (aValue > bValue) return asc ? 1 : -1;
    else return 0;
  });

  // 根据隐藏列的值重新调整行顺序
  rows.forEach((row, index) => {
    const hiddenValue = hiddenValues[index];
    row.cells[column].textContent = hiddenValue;
    tbody.appendChild(row);
  });
}

代码说明

此代码可以处理针对只有一列隐藏的情况。

代码主要分为以下几个步骤：

1. 获取表格中所有行的内容；
2. 获取隐藏列的值；
3. 根据排序列对行进行排序；
4. 根据隐藏列的值重新调整行的顺序；

在步骤1中，我们首先获取表格中tbody节点及其包含的所有行。

在步骤2中，我们通过map方法和textContent属性获取所有行中隐藏列的值，并创建了一个名为hiddenValues的数组。

在步骤3中，我们对rows数组进行了排序。这里需要注意，我们需要将排序列的索引进行调整，以保证隐藏列的值与排序列的值一一对应。

在步骤4中，我们根据隐藏列的值重新调整了行顺序。

代码演示

我们可以先准备一个有隐藏列的HTML代码，作为本代码的输入。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th style="display:none">Gender</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mike</td>
      <td style="display:none">Male</td>
      <td>27</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mary</td>
      <td style="display:none">Female</td>
      <td>25</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td style="display:none">Male</td>
      <td>29</td>
    </tr>
  </tbody>
</table>

我们可以在JS中执行以下代码，实现对年龄这一列进行升序排序：

const table = document.querySelector('table');
sortTable(table, 3, true);

结果如下：

我们可以看到，代码成功地对隐藏列进行了排序。