Kursplan
/* CSS-Styling für die Tabelle */
#table {
border-collapse: collapse;
width: 100%;
font-family: "ui-sans-serif";
font-weight: 500;
text-decoration: none;
color: black;
}
#table td, #table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.filtered {
display: none;
}
.show {
display: table-row;
}
/* CSS-Styling für den Sucheingabebereich */
input[type="text"] {
padding: 5px;
margin-bottom: 10px;
width: 200px;
}
label {
margin-right: 10px;
}
h1 {
margin-bottom: 20px;
}
/* Farbstile für die Kategorien */
.row-beginnerlaufkurs {
background-color: #6EC1E4; /* Hellblau */
}
.row-fortgeschritten1 {
background-color: #61CE70; /* hellgrün */
}
.row-fortgeschritten2 {
background-color: #BEF781; /* Grün */
}
.row-fortgeschritten3 {
background-color: #f78181; /* Rot */
}
.row-funktionellesfitnesstraining {
background-color: #f6cef5; /* Purple */
}
.row-nordicwalkingkurs {
background-color: #F9834E; /* Orange */
}
.row-kinderschwimmkurs {
background-color: #00CED1; /* Dunkeltürkis */
}
#table th {
background-color: white;
color: black;
}
Uhrzeit
Laufkurs
Trainer
Ort
// JSON-Daten für die Laufkurse
var Laufkurse =[
// kategorie: beginnerlaufkurs, fortgeschritten1, fortgeschritten2, fortgeschritten3, funktionellesfitnesstraining, nordicwalkingkurs, kinderschwimmkurs
{"uhrzeit": "16:30", "ort": "Mannheim City", "trainer": "Birgit", "Laufkurs": "Mama-Laufkurs Mannheim - City", "Kategorie": "beginnerlaufkurs"},
{"uhrzeit": "19:00", "ort": "Lampertheim", "trainer": "Steffi", "Laufkurs": "Anfängerlaufkurs Lampertheim", "Kategorie": "beginnerlaufkurs"},
{"uhrzeit": "18:30", "ort": "Mannheim-Karlstern", "trainer": "Peter", "Laufkurs": "Wettkampfvorbereitung MA-Karlstern", "Kategorie": "fortgeschritten2"},
{"uhrzeit": "19:00", "ort": "Lampertheim", "trainer": "Saskia", "Laufkurs": "Ganzheitliches Lauftraining Lampertheim", "Kategorie": "fortgeschritten2"},
{"uhrzeit": "19:00", "ort": "Lampertheim", "trainer": "Daniela", "Laufkurs": "Wettkampfvorbereitung Laufen Lampertheim", "Kategorie": "fortgeschritten3"},
{"uhrzeit": "18:30", "ort": "MA-Gartenstadt", "trainer": "Sandra", "Laufkurs": "Funktionelles Fitnesstraining MA-Gartenstadt", "Kategorie": "funktionellesfitnesstraining"},
// Weitere Laufkurse...
];
// Funktion zum Erstellen der Tabellenzeilen
function createTableRows(data) {
// Sortiere die Laufkurse nach Uhrzeit
data.sort(function(a, b) {
var timeA = a.uhrzeit.split(":");
var timeB = b.uhrzeit.split(":");
return parseInt(timeA[0]) - parseInt(timeB[0]) || parseInt(timeA[1]) - parseInt(timeB[1]);
});
var table = document.getElementById("table");
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
// Kategorie des Laufkurses ermitteln
var category = data[i].Kategorie.toLowerCase().replace(/ /g, "");
// CSS-Klasse basierend auf der Kategorie hinzufügen
row.classList.add("row-" + category);
var uhrzeitCell = document.createElement("td");
uhrzeitCell.textContent = data[i].uhrzeit;
row.appendChild(uhrzeitCell);
var laufkursCell = document.createElement("td");
laufkursCell.textContent = data[i].Laufkurs;
row.appendChild(laufkursCell);
var trainerCell = document.createElement("td");
trainerCell.textContent = data[i].trainer;
row.appendChild(trainerCell);
var ortCell = document.createElement("td");
ortCell.textContent = data[i].ort;
row.appendChild(ortCell);
table.appendChild(row);
}
}
// Funktion zum Filtern der Laufkurse basierend auf dem eingegebenen Suchbegriff
function filterLaufkurse(searchTerm) {
var rows = document.querySelectorAll("#table tr");
for (var i = 1; i < rows.length; i++) {
var laufkurs = rows[i].querySelector("td:nth-child(2)").textContent.toLowerCase();
var trainer = rows[i].querySelector("td:nth-child(3)").textContent.toLowerCase();
var uhrzeit = rows[i].querySelector("td:nth-child(1)").textContent.toLowerCase();
var ort = rows[i].querySelector("td:nth-child(4)").textContent.toLowerCase();
var kategorie = rows[i].classList[0];
var shouldDisplay = false;
// Überprüfe Checkboxen für Spaltenfilterung
var uhrzeitCheckbox = document.getElementById("uhrzeitCheckbox");
var laufkursCheckbox = document.getElementById("laufkursCheckbox");
var trainerCheckbox = document.getElementById("trainerCheckbox");
var ortCheckbox = document.getElementById("ortCheckbox");
if (
(uhrzeitCheckbox.checked && uhrzeit.includes(searchTerm.toLowerCase())) ||
(laufkursCheckbox.checked && laufkurs.includes(searchTerm.toLowerCase())) ||
(trainerCheckbox.checked && trainer.includes(searchTerm.toLowerCase())) ||
(ortCheckbox.checked && ort.includes(searchTerm.toLowerCase()))
) {
shouldDisplay = true;
}
if (shouldDisplay) {
rows[i].classList.remove("filtered");
} else {
rows[i].classList.add("filtered");
rows[i].classList.remove("show");
}
}
}
// Funktion zum Anwenden des Filterstatus auf die Tabellenspalten
function applyFilterStatus() {
// Filterfunktion erneut aufrufen
var searchTerm = searchInput.value;
filterLaufkurse(searchTerm);
}
// Event-Listener für die Suche
var searchInput = document.getElementById("searchInput");
searchInput.addEventListener("input", function() {
var searchTerm = this.value;
filterLaufkurse(searchTerm);
});
// Event-Listener für die Filter-Checkboxen
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", applyFilterStatus);
}
// Initialisierung der Tabelle
createTableRows(Laufkurse);
applyFilterStatus();
[ninja_tables id="13598"]
[ninja_tables id="13602"]
[ninja_tables id="13581"]
[ninja_tables id="13585"]
[ninja_tables id="13589"]
[ninja_tables id="13593"]
[ninja_tables id="13594"]