时间戳

首页 > 解决方案 > 使用逗号值对 HTML 表进行数字排序

javascript - 使用逗号值对 HTML 表进行数字排序

问题描述

正如我们所看到的，当有逗号值时它不起作用

我正在尝试对包含逗号值的 HTML 表的列进行排序。我知道如何对值进行排序，但我不确定如何对具有逗号值的数字进行排序。

在下面的示例中，在页面加载时，它必须按升序排序，但它没有按预期排序。请帮助我。非常感谢你。

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
<body onload="sortTable()">

<table id="myTable">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>25000</td>
    <td>Berglunds snabbkop</td>
  </tr>
  <tr>
    <td>75100</td>
    <td>North/South</td>
  </tr>
  <tr>
    <td>6550</td>
    <td>Alfreds Futterkiste</td>
  </tr>
  <tr>
    <td>2000</td>
    <td>Koniglich Essen</td>
  </tr>
  <tr>
    <td>88,000</td>
    <td>Magazzini Alimentari Riuniti</td>
  </tr>
  <tr>
    <td>69,500</td>
    <td>Paris specialites</td>
  </tr>
  <tr>
    <td>7500</td>
    <td>Island Trading</td>
  </tr>
 
</table>
</body>
正如我所提到的，如果它没有逗号，它可以完美地工作，但问题是数据本质上是动态的，因为它是从 API 获取的，并且它的数据只有逗号值

标签： javascripthtmlsorting

解决方案

删除逗号，将其更改为 aNumber并应用Array#sort。

const nums = ["2,000", "1,000", "1,000,000", "3,500,000"];

nums.sort(
  (a, b) => Number(a.replaceAll(",", "")) - Number(b.replaceAll(",", ""))
);

console.log(nums);

在您的解决方案中，只需修改以下行：

if (Number(x.innerHTML.replaceAll(",", "")) > Number(y.innerHTML.replaceAll(",", "")))

function sortTable() {
  const table = document.querySelector("#myTable");
  const rows = Array.from(table.querySelectorAll("tr")).slice(1);
  rows.sort(
    (a, b) =>
      Number(a.children[0].innerText.replaceAll(",", "")) -
      Number(b.children[0].innerText.replaceAll(",", ""))
  );
  table.innerHTML = rows.map((r) => `<tr>${r.innerHTML}</tr>`).join("");
}
<body onload="sortTable()">
  <table id="myTable">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>25000</td>
      <td>Berglunds snabbkop</td>
    </tr>
    <tr>
      <td>75100</td>
      <td>North/South</td>
    </tr>
    <tr>
      <td>6550</td>
      <td>Alfreds Futterkiste</td>
    </tr>
    <tr>
      <td>2000</td>
      <td>Koniglich Essen</td>
    </tr>
    <tr>
      <td>88,000</td>
      <td>Magazzini Alimentari Riuniti</td>
    </tr>
    <tr>
      <td>69,500</td>
      <td>Paris specialites</td>
    </tr>
    <tr>
      <td>7500</td>
      <td>Island Trading</td>
    </tr>
  </table>
</body>

使用 对表格行进行排序Array#sort。

function sortTable() {
  const table = document.querySelector("#myTable");
  const rows = Array.from(table.querySelectorAll("tr")).slice(1);
  rows.sort(
    (a, b) =>
      Number(a.children[0].innerText.replaceAll(",", "")) -
      Number(b.children[0].innerText.replaceAll(",", ""))
  );
  table.innerHTML = rows.map((r) => `<tr>${r.innerHTML}</tr>`).join("");
}
<body onload="sortTable()">

  <table id="myTable">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>25000</td>
      <td>Berglunds snabbkop</td>
    </tr>
    <tr>
      <td>75100</td>
      <td>North/South</td>
    </tr>
    <tr>
      <td>6550</td>
      <td>Alfreds Futterkiste</td>
    </tr>
    <tr>
      <td>2000</td>
      <td>Koniglich Essen</td>
    </tr>
    <tr>
      <td>88,000</td>
      <td>Magazzini Alimentari Riuniti</td>
    </tr>
    <tr>
      <td>69,500</td>
      <td>Paris specialites</td>
    </tr>
    <tr>
      <td>7500</td>
      <td>Island Trading</td>
    </tr>

  </table>
</body>

推荐阅读