我很难按字母和数字订购 table

Question

我在 W3 学校找到了一个非常有用的脚本，可以按升序或降序对 table 进行排序，问题是我只能让它对一个或另一个起作用。

我正在尝试根据列中的值对 "both" 进行排序。

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}
h1{
 color: green;
 }
th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Value</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>46</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>432</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>463</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>64</td>
  </tr>
</table>

<script>
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.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;
      }
    }
  }
}
</script>

</body>
</html>

我可以修改这个：

if (dir == "asc") {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      } else if (dir == "desc") {
        if (Number(x.innerHTML) < Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      }

为此:

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;
        }
      }

要使其与数字一起使用，但我不能同时进行。我不确定我是否必须创建一个新的 table 或者我是否可以缩进它，但是在哪里？我是 Java 的新手，因为我主要使用 python

进行编码

感谢您的帮助！

Answer 1

您可以用 localeCompare 的支票代替支票，它是 numeric 选项

而不是：

if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

您可以使用：

x = x.innerText.toLowerCase();
y = y.innerText.toLowerCase();

if (x.localeCompare(y, 'en', {numeric: true}) > 0) {

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.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") {
        x = x.innerText.toLowerCase();
        y = y.innerText.toLowerCase();
        if (x.localeCompare(y, 'en', {numeric: true}) > 0) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        x = x.innerText.toLowerCase();
        y = y.innerText.toLowerCase();
        if (x.localeCompare(y, 'en', {numeric: true}) < 0) {
          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;
      }
    }
  }
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

h1 {
  color: green;
}

th,
td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<body>

  <h1>WORKS WITH LETTERS</h1>
  <h1>WORKS WITH LETTERS</h1>
  <h1>WORKS WITH LETTERS</h1>
  <table id="myTable">
    <tr>
      <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Value</th>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>46</td>
    </tr>
    <tr>
      <td>North/South</td>
      <td>34</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Koniglich Essen</td>
      <td>432</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Paris specialites</td>
      <td>463</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>64</td>
    </tr>
  </table>
</body>

Answer 2

请查看localCompare，我认为我符合您的要求String.localeCompare On MDN

if (dir == "asc") {
        if ( ( x.innerHTML.toLowerCase().localeCompare( y.innerHTML.toLowerCase() ) ) > 0 ) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if ( ( x.innerHTML.toLowerCase().localeCompare( y.innerHTML.toLowerCase() ) ) < 0 )  {
          shouldSwitch = true;
          break;
        }
      }

我很难按字母和数字订购 table

I have difficulty ordering a table by letters AND numbers

html

javascript

tab-ordering