JavaScript - HTML-Tabelle sortieren

Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend und 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;

 user-select: None;

}



table#foobar-table thead {

 inset-block-start: 0;

}



table#foobar-table,

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

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

 border: Solid 1px #888888;

 padding: 5px;

 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;

 text-decoration: Underline;

}

</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) {

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

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

  const newRows = Array.from(rows);



  newRows.sort(function(rowA, rowB) {

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

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



     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.addEventListener("click", function() {

       sortColumn(index);

   });

});

</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.

<u> Unterstreichen (Physische Auszeichnung)

CSS - Markierte Checkbox farbig hervorheben

PHP - Text rückwärts ausgeben

JavaScript - Großbuchstaben Test

MySQL - Das Datum und die Uhrzeit der letzten 30 Minuten anzeigen