使用 JavaScript 的可排序 html 整数表答案

【问题标题】：Sortable html table of integers with JavaScript使用 JavaScript 的可排序 html 整数表
【发布时间】：2020-03-28 01:03:47
【问题描述】：

我寻求帮助对仅包含 0-100 范围内的数字的 html 表进行排序，我目前的尝试都是在 javascript 中进行的，但是，它不必在 javascript 中完成。问题似乎在于它将表数据排序为字符串，因为它会按以下顺序对 8、59 和 1 进行排序：1、59、8，我希望它被排序为 1、8、59。我使用的代码来自 w3schools：

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("Tabellen");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

如果我尝试对字母进行排序，这会很好，但是，情况并非如此。我也尝试了以下解决方案：

var collator = new Intl.Collator(undefined, {numeric: true});
var myArray = ['8', '69', '1'];
console.log(myArray.sort(collator.compare));

我在与我自己类似的帖子中找到了它，它本身就可以正常工作，但是，我不知道如何将其合并到 w3schools 代码中以使其正常工作。

【问题讨论】：

像这样比较它们：+x.textContent > +y.textContent（+ 将字符串转换为数字）。最后注：please do not use w3schools.
试试这个arr.sort((a,b)=> Number(a)-Number(b))

标签： javascript html sorting html-table

【解决方案1】：

你可以先把字符串转成数字再排序。

var myArr = ['8', '69', '1'];

var sortedArray = myArr
    .map(function(item) {
        return Number(item);
    })
    .sort(function(a, b){
        return a-b;
    });

console.log(sortedArray); // prints [1, 8, 69]

【讨论】：

感谢您的回答，但恐怕我缺乏编程知识意味着我不太确定如何将其实现到我在原始帖子中发布的第一个代码中，不过，我很感谢你抽出时间为我写一个答案:)。

【解决方案2】：

function sortTable(columnNum){
// ref : https://www.w3schools.com/howto/howto_js_sort_table.asp
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(this.props.id);
switching = true;
dir = "asc"; 
while (switching) {
  switching = false;
  rows = table.rows;
  for (i = 1; i < (rows.length - 1); i++) {
    shouldSwitch = false;
    x = rows[i].getElementsByTagName("TD")[columnNum];
    y = rows[i + 1].getElementsByTagName("TD")[columnNum];
    x = x.textContent.toLowerCase();
    y = y.textContent.toLowerCase();
    let xInt = parseInt(x);
    let yInt = parseInt(y);
    if (dir === "asc") {
      if(x === xInt.toString() && y === yInt.toString()){
        if (xInt > yInt) { shouldSwitch= true;break; }
      }else{ if (x > y) { shouldSwitch= true;break; } }
    } else if (dir === "desc") {
      if(x === xInt.toString() && y === yInt.toString()){
        if (xInt < yInt) { shouldSwitch= true;break; }
      }else{ if (x < y) { shouldSwitch= true;break; } }
    }
    // console.log(x,y)
  }
  if (shouldSwitch) {
    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
    switching = true;
    switchcount ++;      
  } else {
    if (switchcount === 0 && dir === "asc") { dir = "desc"; switching = true; }
  }
}

}

【讨论】：

请说明您所做的更改。