Hervorhebung einer Tabellenzeile in JavaScript

    Zitat

    "Ich würde am liebsten die Tabelle noch responsive machen. Ich habe mir das so vorgestellt, dass über Media Queries alles ausgeblendet wird außer die Spalte "Thema" und dann bei einem Klick auf das jeweilige Thema die anderen Informationen wie bei einem Dropdownmenü nach unten aufklappen oder so. Wie könnte ich das am besten Umsetzen?"


    Das lässt sich relativ leicht mit der jQuery-Funktion slideDown() machen. Ich nehme an, Du meinst diese zweite Tabelle, in der nur der nächstliegende Termin angezeigt wird?



    "Und ich hätte noch die Frage zum PHP mach ich dann einfach in der Sidebar das Include ohne was anderes rein oder muss die Tabelle da bleiben oder wie ist das? Wie wird das angezeigt dann?"
    Nein, die Tabelle brauchst Du dort nicht. Das include wirkt genau so, als wenn Du den Inhalt der Datei in die Zwischenablage kopierst und an der Stelle, wo das include steht, einfügst. Probiere es einfach aus, dann wirst Du es in der Quelltext-Ansicht deines Browser sehen.

    Zitat von Sempervivum

    Das lässt sich relativ leicht mit der jQuery-Funktion slideDown() machen. Ich nehme an, Du meinst diese zweite Tabelle, in der nur der nächstliegende Termin angezeigt wird?

    Nein ich meine die "Haupttabelle" die kleine Tabelle blende ich in der mobilen Version aus.



    Ich habe auch eben noch ein bisschen mit der Tabelle rumprobiert und kann es sein, dass wenn kein aktueller Termin vorhanden ist automatisch die erste Zeile hervorgehoben wird?

    Zitat

    Ich habe auch eben noch ein bisschen mit der Tabelle rumprobiert und kann es sein, dass wenn kein aktueller Termin vorhanden ist automatisch die erste Zeile hervorgehoben wird?

    Da hast Du Recht, ich habe das geändert.


    Ebenso habe ich das Slideup/Slidedown für die Haupttabelle eingebaut:


    http://pastebin.com/5tq0pNnk


    Funktioniert denn das Ajax und das PHP?

    Ich habe das mit dem slide bereits gemacht allerdings bin ich nicht ganz zufrieden damit, vielleicht könntest du meine version verbessern da ich das ein bisschen anders haben möchte, wie du es gemacht hast:


    JavaScript
    var fn = function () {if (window.matchMedia('(max-width: 630px)').matches) {	$(document).ready(function(){	$(".link1").click(function(){		$(".mobil1").slideDown();		$(".mobil2, .mobil3, .mobil4, .mobil5").slideUp();		});		$(".link2").click(function(){		$(".mobil2").slideDown();		$(".mobil1, .mobil3, .mobil4, .mobil5").slideUp();	});		$(".link3").click(function(){		$(".mobil3").slideDown();		$(".mobil1, .mobil2, .mobil4, .mobil5").slideUp();	});		$(".link4").click(function(){		$(".mobil4").slideDown();		$(".mobil1, .mobil2, .mobil3, .mobil5").slideUp();	});		$(".link5").click(function(){		$(".mobil5").slideDown();		$(".mobil1, .mobil2, .mobil3, .mobil4").slideUp();	});});
} if (window.matchMedia('(width: 631px)').matches) {	window.location.reload();}	




};	document.addEventListener('DOMContentLoaded', fn);	window.addEventListener('resize', fn);

    Ich muss halt erzwingen, dass die Seite aktualisiert wird um von der Mobilentabelle auf die Normale Tabelle umzuspringen und wenn jemand was ins Formular eingegeben hat und sich das Browserfenster verändert sind alle eingaben weg... Das ist nicht so gut


    Das Mit dem PHP hab ich noch nicht getestet kam noch nicht dazu den Server zu installieren.


    Und das mit dem aktuellsten Termin funktioniert jetzt allerdings zeigt DW mehrere Fehler an darunter:


    Expectet '!==' and instead saw '!='.


    Expected '===' and instead saw '=='.


    Ist das schlimm?

    Die Fehlermeldungen von Dreamweaver kannst du ignorieren. '===' bedeutet, dass die beiden Variablen nicht nur vom Wert sondern auch vom Typ übereinstimmen müssen.



    Leider postest Du nicht das HTML, so dass ich nicht verstehe, was Du mit dem Javascript vor hast. Kannst Du das mal verbal beschreiben und am besten die ganze Seite bei pastebin.com posten?

    Zitat

    wenn jemand was ins Formular eingegeben hat und sich das Browserfenster verändert sind alle eingaben weg... Das ist nicht so gut

    Das liegt wahrscheinlich am Reload. Man könnte die Inhalte der Formularfelder im Localstorage speichern, aber ich bin relativ sicher, dass das, was Du brauchst, auch ohne Reload machbar ist.

    Also danke für deine Hilfe mit dem SlideDown ich bin echt froh das ich das selber einigermaßen hinbekommen habe. Da aber die Funktion unzuverlässig reagiert hat hab ich jetzt das ganze über die


    CSS-Funktion "display: block" gelöst. Das mit dem PHP werde ich bald testen. Ich muss einfach den Server localhost installieren und dann den Ordner mit der Website in den Serverordner ziehen oder?

    Zitat

    Ich muss einfach den Server localhost installieren und dann den Ordner mit der Website in den Serverordner ziehen oder?

    Wie das genau geht, kann ich dir leider nicht sagen, weil ich XAMPP nicht einsetze. Es gibt aber ein Forum speziell dafür. Möglicherweise muss man die Dateien gar nicht verschieben, sondern kann einen beliebigen Ordner als root für den Server definieren.

    Ich bin vor kurzer Zeit auf Visual Studio Community umgestiegen. Das hat den Webserver integriert, so dass man kein XAMPP installieren muss. Kleiner Wermutstropfen: Die PHP-Unterstützung kostet 79 Dollar. Das habe ich in Kauf genommen, weil mir eine Fehleranzeige während des Editieren unverzichtbar war. Mit kleinen Abstrichen kann man das aber auch kostenlos bei NetBeans und wahrscheinlich auch Eclipse bekommen, wenn man die Mühe in Kauf nimmt, XAMPP und Erweiterungen zu installieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden