JavaScript - HTML-Tabelle sortieren

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

Nr. Vorname Name Alter
1 Andrea Ross 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>

table#foobar-table thead {
 
positionsticky;
}

table#foobar-table thead {
 
inset-block-start0;
}

table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
 
borderSolid 1px #888888;
 
padding5px;
}

table#foobar-table > thead > tr {
 
background-color#FFAE5E;
 
cursorPointer;
}

table#foobar-table > tbody > tr:nth-child(even) {
 
background-color#FFFFFF;
}

table#foobar-table > tbody > tr:nth-child(odd) {
 
background-color#FFD2A6;
}

#foobar-table {
 
margin-left50px;
}
</
style>

<
table id="foobar-table">
<
thead>

 <
tr>
  <
th data-type="number">Nr.</th>
  <
th data-type="string">Vorname</th>
  <
th data-type="string">Name</th>
  <
th data-type="number">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(indexcontent) {
 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;
  const 
newRows = Array.from(rows);

  
newRows.sort(function(rowArowB) {
     const 
cellA rowA.querySelectorAll("td")[index].textContent;
     const 
cellB rowB.querySelectorAll("td")[index].textContent;

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

<nav> Navigationsbereich

CSS - Verwendung von Datenattributen (data-*)

PHP - Bild und Bildinformation anzeigen

JavaScript - Zufallsfarbe ausgeben

MySQL - Datenbank-Abfrage über den URL-Parameter