JavaScript - HTML-Tabelle sortieren

Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend oder 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 {
 
margin-left50px;
}

table#foobar-table thead {
 
positionsticky;
 
inset-block-start0;
 
user-selectNone;
}

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

table#foobar-table > thead > tr {
 
background-colorrgba(255174940.8);
 
cursorPointer;
}

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 {
 
cursorPointer;
}

.
upArrow::after {
 
content"\2191";
 
color#FFFFFF;
 
positionabsolute;
}

.
dnArrow::after {
 
content"\2193";
 
color#FFFFFF;
 
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>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(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 
newRows = Array.from(rows);

  if (
direction === "asc") {
   
document.getElementById(index).classList.add("upArrow");
  }
  else {
   
document.getElementById(index).classList.add("dnArrow");
  }

  
newRows.sort((rowArowB) => {
     const 
cellA rowA.querySelectorAll("td")[index].textContent.toLowerCase();
     const 
cellB 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>

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