我很難按字母和數字訂購桌子

Question

我在 W3 學校找到了一個非常有用的腳本，可以按升序或降序對表格進行排序，問題是我只能讓它對一個或另一個起作用。

我試圖根據列中的值對“兩者”進行排序。

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

為了使它與數字一起工作，但我不能同時進行。 我不確定我是否必須創建一個新表，或者我是否可以縮進它，但是在哪里？？ 我對 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;
        }
      }

我很難按字母和數字訂購桌子

問題描述

2 個解決方案

解決方案1
0 已采納 2020-01-02 23:12:36

解決方案2
0 2020-01-02 23:13:27

我很難按字母和數字訂購桌子

問題描述

2 個解決方案

解決方案1 0 已采納 2020-01-02 23:12:36

解決方案2 0 2020-01-02 23:13:27

解決方案1
0 已采納 2020-01-02 23:12:36

解決方案2
0 2020-01-02 23:13:27