如何使用 JQuery 对表格列进行升序和降序排序？答案

【问题标题】：How to Sort the table column both ascending and descending using JQuery?如何使用 JQuery 对表格列进行升序和降序排序？
【发布时间】：2021-12-24 02:21:22
【问题描述】：

在下面的代码中，我只能按升序对表格进行排序。当我第二次单击表格标题时，它不会将顺序切换为降序。

谁能帮助我如何在两个方向上对表格列进行排序？是否有任何替代方法可用于对表数据内的文本框值进行排序？

$("#sortcol").click(function() {
  const table = document.getElementById('tab_logic');
  const headers = table.querySelectorAll('th');
  const tableBody = table.querySelector('tbody');
  const rows = tableBody.querySelectorAll('tr');
  const directions = Array.from(headers).map(function(header) {
    return '';
  });
  
  const transform = function(index, content) {
    const type = headers[index].getAttribute('data-type');
    switch (type) {
      case 'number':
        return parseFloat(content);
      case 'string':
      default:
        return content;
    }
  };
  
  const sortColumn = function(index) {
    const direction = directions[index] || 'asc';
    const multiplier = direction === 'asc' ? 1 : -1;
    const newRows = Array.from(rows);
    
    newRows.sort(function(rowA, rowB) {
      const cellA = rowA.getElementsByTagName("td")[index];
      const cellB = rowB.getElementsByTagName("td")[index];
      const cellC = $(cellA).find('input').val();
      const cellD = $(cellB).find('input').val();
      const a = transform(index, cellC);
      const b = transform(index, cellD);
      switch (true) {
        case a > b:
          return 1 * multiplier;
        case a < b:
          return -1 * multiplier;
        case a === b:
          return 0;
      }
    });
    
    [].forEach.call(rows, function(row) {
      tableBody.removeChild(row);
    });
    
    directions[index] = direction === 'asc' ? 'desc' : 'asc';
    
    newRows.forEach(function(newRow) {
      tableBody.appendChild(newRow);
    });
  };
  
  sortColumn(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab_logic" style="width: 40%; border: 1px solid black;">
  <thead>
    <tr>
      <th data-type="number">check</th>
      <th id="sortcol">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" MySQL">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Python">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Javascript">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Angular JS">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Csharp">
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

const directions 是 inside 点击事件，所以 directions[index] = 只会在下次点击时重置。将它移到外面（不要重置它），它工作正常：jsfiddle.net/367dnsL9 投票关闭为错字。
感谢@Rory McCrossan，它完美运行
我所做的只是编辑您的问题 - @freedomn-m 应该感谢您解决问题
@freedomn-m 谢谢！！！

标签： javascript jquery sorting

【解决方案1】：

您的代码完全没问题，唯一的问题是当您单击它时，方向变量正在重置并且“asc”值没有保留在数组中。请检查以下代码。

var rows;
var directions;
var headers;
var tableBody;
$(document).ready(function(){
 const table = document.getElementById('tab_logic');
  headers = table.querySelectorAll('th');
  tableBody = table.querySelector('tbody');
  rows = tableBody.querySelectorAll('tr');
  directions = Array.from(headers).map(function(header) {
    return '';
  });
})
const transform = function(index, content) {
    const type = headers[index].getAttribute('data-type');
    switch (type) {
      case 'number':
        return parseFloat(content);
      case 'string':
      default:
        return content;
    }
  };
  
  const sortColumn = function(index) {
    const direction = directions[index] || 'asc';
    const multiplier = direction === 'asc' ? 1 : -1;
    const newRows = Array.from(rows);
    
    newRows.sort(function(rowA, rowB) {
      const cellA = rowA.getElementsByTagName("td")[index];
      const cellB = rowB.getElementsByTagName("td")[index];
      const cellC = $(cellA).find('input').val();
      const cellD = $(cellB).find('input').val();
      const a = transform(index, cellC);
      const b = transform(index, cellD);
      switch (true) {
        case a > b:
          return 1 * multiplier;
        case a < b:
          return -1 * multiplier;
        case a === b:
          return 0;
      }
    });
    
    [].forEach.call(rows, function(row) {
      tableBody.removeChild(row);
    });
    
   
    
    newRows.forEach(function(newRow) {
      tableBody.appendChild(newRow);
    });
     directions[index] = direction === 'asc' ? 'desc' : 'asc';
  };
$("#sortcol").click(function() {  
  sortColumn(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab_logic" style="width: 40%; border: 1px solid black;">
  <thead>
    <tr>
      <th data-type="number">check</th>
      <th id="sortcol">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" MySQL">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Python">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Javascript">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Angular JS">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text" Value=" Csharp">
      </td>
    </tr>
  </tbody>
</table>

【讨论】：