+49 621 76 28 146
+49 176 42 59 37 33
Märker Querschlag 1a, Mannheim
Image Alt

Ninja Table – Duplicate – [#13439]

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