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 und Tabellenkalender

<style>

table#foobar-table {

 margin-left: 50px;

}



table#foobar-table thead {

 position: sticky;

 inset-block-start: 0;

 user-select: None;

}



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;

}



table#foobar-table > thead > tr {

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

 cursor: Pointer;

}



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

 background-color: #FFFFFF;

}



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

 background-color: #FFD2A6;

}



table#foobar-table th[data-type="number"]:hover,

table#foobar-table th[data-type="string"]:hover {

 cursor: Pointer;

}



.upArrow::after {

 content: "\2191";

 color: #FFFFFF;

 position: absolute;

}



.dnArrow::after {

 content: "\2193";

 color: #FFFFFF;

 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>Andrea</td>

  <td>Ross</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 newRows = Array.from(rows);



  if (direction === "asc") {

   document.getElementById(index).classList.add("upArrow");

  }

  else {

   document.getElementById(index).classList.add("dnArrow");

  }



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

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

     const cellB = 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>

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

Bausteine  Alle Anzeigen

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

<base> Basis-URL

CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen

PHP - URL validieren

JavaScript - Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste

MySQL - Das Datum und die Uhrzeit der letzten Stunde anzeigen