Java 脚本 table 排序数值

Question

脚本给出了错误的数值结果，如何修复它以同时适用于数字和字母？

这是我用的javascript

function sortTableByColumn(table, column, asc = true) {
    const dirModifier = asc ? 1 : -1;
    const tBody = table.tBodies[0];
    const rows = Array.from(tBody.querySelectorAll("tr"));

    // Sort each row
    const sortedRows = rows.sort((a, b) => {
        const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
        const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();

        return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
    });

    // Remove all existing TRs from the table
    while (tBody.firstChild) {
        tBody.removeChild(tBody.firstChild);
    }

    // Re-add the newly sorted rows
    tBody.append(...sortedRows);

    // Remember how the column is currently sorted
    table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
}

document.querySelectorAll(".table-sortable th").forEach(headerCell => {
    headerCell.addEventListener("click", () => {
        const tableElement = headerCell.parentElement.parentElement.parentElement;
        const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
        const currentIsAscending = headerCell.classList.contains("th-sort-asc");

        sortTableByColumn(tableElement, headerIndex, !currentIsAscending);
    });
});

.table-sortable th {
  cursor: pointer;
}

.table-sortable .th-sort-asc::after {
  content: "b4";
}

.table-sortable .th-sort-desc::after {
  content: "be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
  margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
  background: rgba(0, 0, 0, 0.1);
}

<html>
<head><title>Some table</title></head>

<body>
  <table class="table-sortable">
    <thead>
      <tr>
        <th>Roll number</th>
        <th>Name</th>
        <th>Another number</th>
      <tr>
    </thead>
    <tbody>
      <tr><td>34351</td><td>svvfvs</td><td>4551</td></tr>
      <tr><td>99</td><td>ghh</td><td>413</td></tr>
      <tr><td>6455</td><td>fddfbb</td><td>82</td></tr>
      <tr><td>1245</td><td>dfvfdvfdv</td><td>4315</td></tr>
      <tr><td>46130</td><td>fvfvfvf</td><td>8846161</td></tr>
    </tbody>
  </table>
</body>
</html>

css脚本仅用于指示asc，dec在css中没问题，though

您可以运行代码并查看第 1 列和第 3 列只是取第一个字符并用它来对数字进行排序也给出了错误的结果。

能否请您编辑代码并将其作为一个整体 post，它真的会发生。提前致谢

Answer 1

您可以在排序函数中简单地检查 aColText 和 bColText 是 number 还是 string

function sortTableByColumn(table, column, asc = true) {
  const dirModifier = asc ? 1 : -1;
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.querySelectorAll("tr"));

  // Sort each row
  const sortedRows = rows.sort((a, b) => {
    const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    if (isNaN(parseFloat(aColText)) && isNaN(parseFloat(bColText))) {
      return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
    }
    return +aColText > +bColText ? (1 * dirModifier) : (-1 * dirModifier);
  });

  // Remove all existing TRs from the table
  while (tBody.firstChild) {
    tBody.removeChild(tBody.firstChild);
  }

  // Re-add the newly sorted rows
  tBody.append(...sortedRows);

  // Remember how the column is currently sorted
  table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
  table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
  table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
}

document.querySelectorAll(".table-sortable th").forEach(headerCell => {
  headerCell.addEventListener("click", () => {
    const tableElement = headerCell.parentElement.parentElement.parentElement;
    const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
    const currentIsAscending = headerCell.classList.contains("th-sort-asc");

    sortTableByColumn(tableElement, headerIndex, !currentIsAscending);
  });
});

.table-sortable th {
  cursor: pointer;
}

.table-sortable .th-sort-asc::after {
  content: "b4";
}

.table-sortable .th-sort-desc::after {
  content: "be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
  margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
  background: rgba(0, 0, 0, 0.1);
}

<html>

<head>
  <title>Some table</title>
</head>

<body>
  <table class="table-sortable">
    <thead>
      <tr>
        <th>Roll number</th>
        <th>Name</th>
        <th>Another number</th>
        <tr>
    </thead>
    <tbody>
      <tr>
        <td>34351</td>
        <td>svvfvs</td>
        <td>4551</td>
      </tr>
      <tr>
        <td>99</td>
        <td>ghh</td>
        <td>413</td>
      </tr>
      <tr>
        <td>6455</td>
        <td>fddfbb</td>
        <td>82</td>
      </tr>
      <tr>
        <td>1245</td>
        <td>dfvfdvfdv</td>
        <td>4315</td>
      </tr>
      <tr>
        <td>46130</td>
        <td>fvfvfvf</td>
        <td>8846161</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Java 脚本 table 排序数值

Java script table sorting numeric values

html

javascript

numeric

alphabetical

sorttable.js