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, Tabellenkalender und CSV-Datei einlesen und dynamisch als Tabelle ausgeben


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

Homepage strukturieren
evor Sie mit der Programmierung und dem Designen der Homepage beginnen, sollten Sie sich hinsichtlich der Strukturierung der Homepage sicher sein. Dies vereinfacht die Programmierung und verkürzt Ihren Aufwand. Beginnen Sie erst mit dem Programmieren der Homepage, wenn die Struktur/Gliederung der Homepage festgelegt ist.