JavaScript - HTML-Tabelle sortieren

Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend oder aufsteigend sortiert werden.

Siehe auch: HTML-Tabelle filtern, HTML-Tabelle Spaltenbreite anpassen, HTML-Tabelle als CSV-Datei exportieren, Tabellenkalender und CSV-Datei einlesen und dynamisch als Tabelle ausgeben

<style>

/* HTML-Tabelle sortieren */



table#foobar-table {

 margin-left: 50px;

}



/* Tabellenkopf festsetzen */

table#foobar-table thead {

 position: sticky;

 inset-block-start: 0;

 user-select: none;

}



/* Hintergrund Tabellenkopf */

table#foobar-table > thead > tr {

 background-color: rgba(255, 174, 94, 0.8);

}



table#foobar-table > thead > tr > th:hover {

 background-color: #FFAE5E;

 cursor: pointer;

}



/* Die Spalten der Tabelle anpassen */

table#foobar-table,

table#foobar-table > thead > tr > th,

table#foobar-table > tbody > tr > td {

 border: Solid 1px #888888;

 padding: 5px 8px 5px 8px;

 color: #000000;

}



/* Spalte in der Tabelle von der Sortierung ausschließen */

table#foobar-table > thead > tr > td {

 border: Solid 1px #888888;

 padding: 5px 8px 5px 8px;

 color: #000000;

 font-weight: bold;

 text-align: center;

}



/* Den Hintergrund zeilenweise einfärben */

table#foobar-table > tbody > tr:nth-child(even) {

 background-color: #FFFFFF;

}



table#foobar-table > tbody > tr:nth-child(odd) {

 background-color: #FFD2A6;

}



/* Pfeil nach oben */

.upArrow::after {

 content: "\2191";

 color: #FFFFFF;

 text-shadow: 1px 1px 0px #000000;

 position: absolute;

}



/* Pfeil nach unten */

.dnArrow::after {

 content: "\2193";

 color: #FFFFFF;

 text-shadow: 1px 1px 0px #000000;

 position: absolute;

}

</style>



<table id="foobar-table">

<thead>



 <tr>

  <th data-type="number" title="Nach Nummer sortieren">Nr.</th>

  <th data-type="string" title="Nach Vorname sortieren">Vorname</th>

  <th data-type="string" title="Nach Name sortieren">Name</th>

  <th data-type="number" title="Nach Alter sortieren">Alter</th>

 </tr>



</thead>

<tbody>



 <tr>

  <td>1</td>

  <td>Allison</td>

  <td>DuBouis</td>

  <td>18</td>

 </tr>



 <tr>

  <td>2</td>

  <td>Penelope</td>

  <td>Mills</td>

  <td>36</td>

 </tr>



 <tr>

  <td>3</td>

  <td>Sarah</td>

  <td>Grant</td>

  <td>14</td>

 </tr>



</tbody>

</table>



<script>

// HTML-Tabelle sortieren



const table = document.getElementById("foobar-table");

const headers = table.querySelectorAll("th");

const tableBody = table.querySelector("tbody");

const rows = tableBody.querySelectorAll("tr");

const directions = Array.from(headers).map(function(header) {

 return "";

});



const transform = function(index, content) {

 const type = headers[index].getAttribute("data-type");

 switch (type) {

     case "number":

  return parseFloat(content);

     case "string":

     default:

  return content;

 }

};



const sortColumn = function(index, headers) {



 const cls = ["upArrow", "dnArrow"];

 headers.forEach((header) => {

  document.getElementById(header.id).classList.remove(...cls);

 });



  const direction = directions[index] || "asc";

  const multiplier = (direction === "asc") ? 1 : -1;

  const cssSort = (direction === "asc") ? cls[0] : cls[1];

  document.getElementById(index).classList.add(cssSort);



  const newRows = Array.from(rows);

  newRows.sort((rowA, rowB) => {

     const cellA = encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase());

     const cellB = encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase());



     const a = transform(index, cellA);

     const b = transform(index, cellB);



     switch (true) {

      case a > b: return 1 * multiplier;

      case a < b: return -1 * multiplier;

      case a === b: return 0;

       }

   });



   [].forEach.call(rows, function(row) {

       tableBody.removeChild(row);

   });



   directions[index] = direction === "asc" ? "desc" : "asc";

   newRows.forEach(function(newRow) {

       tableBody.appendChild(newRow);

   });

 };



[].forEach.call(headers, function(header, index) {

   header.setAttribute("id", index);

   header.addEventListener("click", () => {

       sortColumn(index, headers);

   });

});

</script>

Die Tabelle muss die Bereiche <thead> und <tbody> beinhalten. Tabellenspalten die Zahlen enthalten werden mit: data-type="number" und Wörter mit: data-type="string" gekennzeichnet.

Spalte in der Tabelle von der Sortierung ausschließen

Ersetzen Sie im Tabellenkopf zum Beispiel:

<th data-type="number" title="Nach Alter sortieren">Alter</th>

durch:

<td>Alter</td>

Format von Datumsangaben

Damit Datumsangaben richtig sortiert werden können, müssen diese im Format: JJJJ-MM-DD (Beispiel: 2023-09-29) eingetragen werden.

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<meta> Meta-Angaben

CSS - Sternebewertung

PHP - Das aktuelle Bild (einer Webcam) anzeigen

JavaScript - Anzahl der HTML-Tags

MySQL - Das Alter von Personen ermitteln