JavaScript - HTML-Tabelle sortieren

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

Nr. Vorname Name Alter
1 Allison DuBouis 18
2 Penelope Mills 36
3 Sarah Grant 14
4 Vanessa Roberts 27
5 Oliver Alsop 12
6 Jennifer Forsyth 7
7 Michelle King 21
8 Steven Kelly 55
9 Julian Ferguson 15
10 Chloe Ince 23
11 Sarah Myer 22

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


<style>

/* HTML-Tabelle sortieren */

table#foobar-table {
 
margin-left50px;
}

/* Tabellenkopf festsetzen */
table#foobar-table thead {
 
positionsticky;
 
inset-block-start0;
 
user-selectnone;
}

/* Hintergrund Tabellenkopf */
table#foobar-table > thead > tr {
 
background-colorrgba(255174940.8);
}

table#foobar-table > thead > tr > th:hover {
 
background-color#FFAE5E;
 
cursorpointer;
}

/* Die Spalten der Tabelle anpassen */
table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
 
borderSolid 1px #888888;
 
padding5px 8px 5px 8px;
 
color#000000;
}

/* Spalte in der Tabelle von der Sortierung ausschließen */
table#foobar-table > thead > tr > td {
 
borderSolid 1px #888888;
 
padding5px 8px 5px 8px;
 
color#000000;
 
font-weightbold;
 
text-aligncenter;
}

/* 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-shadow1px 1px 0px #000000;
 
positionabsolute;
}

/* Pfeil nach unten */
.dnArrow::after {
 
content"\2193";
 
color#FFFFFF;
 
text-shadow1px 1px 0px #000000;
 
positionabsolute;
}
</
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(indexcontent) {
 const 
type headers[index].getAttribute("data-type");
 switch (
type) {
     case 
"number":
  return 
parseFloat(content);
     case 
"string":
     default:
  return 
content;
 }
};

const 
sortColumn = function(indexheaders) {

 const 
cls = ["upArrow""dnArrow"];
 
headers.forEach((header) => {
  
document.getElementById(header.id).classList.remove(...cls);
 });

  const 
direction directions[index] || "asc";
  const 
multiplier = (direction === "asc") ? : -1;
  const 
cssSort = (direction === "asc") ? cls[0] : cls[1];
  
document.getElementById(index).classList.add(cssSort);

  const 
newRows = Array.from(rows);
  
newRows.sort((rowArowB) => {
     const 
cellA encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase());
     const 
cellB encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase());

     const 
transform(indexcellA);
     const 
transform(indexcellB);

     switch (
true) {
      case 
b: return multiplier;
      case 
b: return -multiplier;
      case 
=== 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(headerindex) {
   
header.setAttribute("id"index);
   
header.addEventListener("click", () => {
       
sortColumn(indexheaders);
   });
});
</
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-01-28) eingetragen werden.

Bausteine  Alle Anzeigen

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

<head> Kopfdaten

CSS - Kalender Symbol neben dem Datepicker

PHP - Einbindung einer Datei je nach gewählter Auswahl

JavaScript - HTML-Details automatisch schließen

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array

Klare Rubrikeinteilung
Damit der Benutzer schnell und vor allem einfach an die gewünschten Informationen kommt, müssen die einzelnen Inhalte (Artikel etc.) der Homepage in klar ersichtliche Rubriken eingeteilt werden.