【问题标题】:Table only sorting Alphabetically, not Numerically [closed]表格仅按字母顺序排序,而不是按数字排序[关闭]
【发布时间】:2019-05-16 06:04:41
【问题描述】:

我有一个由 PHP 变量填充的表。 PHP 值来自 API 的 JSON。

我想在同一个表中按字母和数字排序。

下面的函数有效,但只能按字母顺序正确排序。

我可以修改此功能以也按数字排序吗?

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*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")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //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;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

【问题讨论】:

  • 这只是你的 JavaScript。如果没有 HTML 和/或 PHP,我们将无法为您提供帮助

标签: javascript json sorting html-table


【解决方案1】:
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  var regex = /\$|USD|EURO|,/gi;
  var xinnerHTML="", yinnerHTML="";

  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
      switching = false;
      rows = table.getElementsByTagName("TR");
      for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];


      xinnerHTML = x.innerHTML.replace(regex, '');
      yinnerHTML = y.innerHTML.replace(regex, '');

                var xContent = (isNaN(xinnerHTML))
    ? (xinnerHTML.toLowerCase() === '-')
        ? 0 : xinnerHTML.toLowerCase()
    : parseFloat(xinnerHTML);
var yContent = (isNaN(yinnerHTML))
    ? (yinnerHTML.toLowerCase() === '-')
        ? 0 : yinnerHTML.toLowerCase()
    : parseFloat(yinnerHTML);
      if (dir == "asc") {
          if (xContent > yContent) {
              shouldSwitch= true;
              break;
          }
      } else if (dir == "desc") {
          if (xContent < yContent) {
              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;
      }
     }
   }
}

【讨论】:

  • 您好,能否请您粘贴整个代码,同时告诉我应该将新功能放在哪里?它运行不正常。
  • 好的,我已经粘贴了。立即尝试。
  • 谢谢,但由于某种原因它仍然无法正常工作。图表中的数据是否来自 JSON 代码并存储在 PHP 变量中是否重要?
  • 我在上面的新答案中添加了新代码。你能看一下吗?非常感谢。
【解决方案2】:

我改变了方向并找到了有效的新代码。但是,如果同一单元格中有数字和字母,它将不会按数字排序。我该怎么做?我将在下面粘贴新代码。

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
      switching = false;
      rows = table.getElementsByTagName("TR");
      for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
                var xContent = (isNaN(x.innerHTML))
    ? (x.innerHTML.toLowerCase() === '-')
        ? 0 : x.innerHTML.toLowerCase()
    : parseFloat(x.innerHTML);
var yContent = (isNaN(y.innerHTML))
    ? (y.innerHTML.toLowerCase() === '-')
        ? 0 : y.innerHTML.toLowerCase()
    : parseFloat(y.innerHTML);
      if (dir == "asc") {
          if (xContent > yContent) {
              shouldSwitch= true;
              break;
          }
      } else if (dir == "desc") {
          if (xContent < yContent) {
              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;
      }
     }
   }
}

【讨论】:

  • 我猜这应该是正确排序的。
  • 只要不是“$50”或“50 USD”等特殊字符,它就可以工作。当同一单元格中有其他字符时,有没有办法进行数字排序?
  • 您可以在检查 isNan() 之前删除美元或美元字符,如下所示: var regex = /\$|USD/gi; x.innerHTML = x.innerHTML.replace(正则表达式, '');对 y.innerHTML 做同样的事情
  • 谢谢,但我不是程序员。您能否将新代码与您的新修改一起粘贴?我尝试了一些东西,但它运行不正常。再次感谢您。
  • 我编辑了我的答案,我只是修改了你的答案以实现 JS 替换。要删除 $、USD、EURO 等。您可以在 regex var 中添加更多货币。
猜你喜欢
  • 2016-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-03-24
  • 2018-09-15
  • 2020-11-26
  • 1970-01-01
  • 2019-04-05
相关资源
最近更新 更多