Tabelle mit Variablen sortieren

Weini · 24.03.2023

Hallo zusammen,
um eine Tabelle zu sortieren benutze ich folgenden Beispiel Code von w3schools.com:

HTML:

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

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

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

<p>Click the button to sort the table numerically:</p>
<p><button onclick="sortTable()">Sort</button></p>

<table id="myTable">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>5</td>
    <td>Berglunds snabbkop</td>
  </tr>
  <tr>
    <td>3</td>
    <td>North/South</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Alfreds Futterkiste</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Koniglich Essen</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Magazzini Alimentari Riuniti</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Paris specialites</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Island Trading</td>
  </tr>
 
</table>

<script>
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.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.parentNode.insertBefore(rows[i + 1], rows);
      switching = true;
    }
  }
}
</script>

</body>
</html>

Das klappt auch soweit alles ganz gut.
Nun möchte ich die Zahlen die verglichen werden, aber gerne durch Variablen ersetzen.
Aktuell sieht die Zeile so aus:

<td>1</td>

Und ich würde Sie gerne so schreiben:

<td>variable</td>

Natürlich habe ich die Variable vorher deklariert:

var variable = 1;

In der Tabelle wird Zahl auch angezeigt.
Sie wird allerdings nicht mehr beim Sortieren berücksichtigt.

Kann mir jemand dabei helfen, denn JS Code so umzuändern, dass keine festen Nummer sondern Variablen verglichen werden?

Vielen Dank im Voraus

Freundliche Grüße

Sempervivum · 27.03.2023

Du schreibst:

In der Tabelle wird Zahl auch angezeigt.

Das verstehe ich so, dass das Übertragen des Inhaltes der Variablen in die Tabellenzelle funktioniert? In dem Fall vermisste ich das Javascript, das das Eintragen erledigt.

Weini · 27.03.2023

Ich habe in der Tabelle aus dem Beispiellosen die Zahlen durch die Variablen ersetzt und lasse sie mit dem Befehl: document.write

Das ganze sieht dann ungefähr so aus:

<td>
<script>
document.write(variable)
</script>
</td>

Dadurch wird dann die vorher mit der Variable deklarierte Zahl in der Tabelle angezeigt.
Die Sortierung funktioniert aber nicht mehr.

Sempervivum · 27.03.2023

Verstehe. Hier wirst Du mit einem Nachteil von document.write konfrontiert: Es funktioniert dann manches nicht so wie gewünscht. Eine Alternative wäre ein Template-String, dort könntest Du direkt die Variablen in das HTML eintragen, siehe hier:
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/template-literal
Allerdings müsstest Du dann den gesamten Body der Tabelle zunächst in Javascript definieren was ich weniger schön finden würde.
Alternativ kannst Du die Werte mit textContent in die Zellen eintragen, dann müsstest Du aber ihnen aber jeweils eine ID geben um sie ansprechen zu können.
Am besten beschreibst Du mal den Hintergrund der ganzen Sache, wo die Variablen her kommen und was das Ziel ist. Möglicher Weise gibt es noch andere Möglichkeiten, z. B. die ganze Tabelle aus einem Array aufzubauen.