Hervorhebung einer Tabellenzeile in JavaScript

  • <input type="date"> ist nur bedingt zu empfehlen, weil es von IE nicht unterstützt wird. In diesem Fall wäre es einfacher, ein select-option zu verwenden und automatisch mit den Daten zu füllen. Überleg mal, ob das für dich in Frage kommt.

  • Würde dann so aussehen:
    http://pastebin.com/XKg151Yk



    Bzgl. der Validierung verhält dies sich IMO auch nicht anders als ein date-Input: Da der Benutzer nur eine Auswahl aus den Vorgaben treffen kann, kann er nichts fehlerhaftes eingeben.


    Unter value kann man auch ein abweichendes Format eintragen, wenn Du es bei der Auswertung des Formulars brauchst.

  • Dann muss ich die Options aber noch mit:


    Code
    1. document.getElementById("Option1").innerHTML = keine Ahnung


    füllen oder?


    Aber dann wenn nur z.B. 2 Termine aktuell sind, sind auch 3 Felder leer...

  • Zitat

    Dann muss ich die Options aber noch mit: ... füllen, oder?

    Das tut das Script schon, siehe am Ende des Javascript-Abschnitts.

    Zitat

    Aber dann wenn nur z.B. 2 Termine aktuell sind, sind auch 3 Felder leer...

    Das kann man leicht vermeiden, indem man die options nicht nur mit Inhalt füllt, sondern auch automatisch anlegt:



    var terminauswahl = document.getElementById("terminauswahl");
    terminauswahl.innerHTML = "";
    for (var i = 0; i < rows.length; i++) {
    var time = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML;
    var opt = document.createElement("option");
    opt.value = time;
    opt.innerHTML = time;
    terminauswahl.appendChild(opt);
    }

  • Zitat

    Und mir ist noch ein anderes Problem aufgefallen die Sidebar funktioniert nicht auf anderen Seiten...

    Das liegt daran, dass alles, was man mit Javascript macht, auf die aktuelle Seite beschränkt ist. Will man die Sidebar auf allen Seiten haben, muss man PHP einbeziehen: Mit Ajax die Daten an den Server übertragen; das PHP-Skript generiert das HTML und trägt es in eine Datei ein; diese kannst Du dann auf allen Seiten mit PHP-Include einbinden. Wenn Du das brauchst, kann ich es für dich programmieren.

  • Zitat

    Irgendwo ist ein Fehler, das Selectfeld ist leer

    Bei mir funktioniert es. Welchen Code hast Du jetzt, den aus pastebin, oder den zweiten, den ich im Forum gepostet habe? Ich hatte Probleme mit dem [ i ] und musste meinen Post editieren. Möglicher Weise hast Du zuvor eine fehlerhafte Version erwischt.

  • Du investierst aber viel Zeit in mein Projekt...


    Ich überleg mir das noch mit dem PHP...




    Wir können ja erstmal dieses Problem angehen:

    Irgendwo ist ein Fehler, das Selectfeld ist leer

    Ich habe hier mal den HTML-Code:


    Code
    1. <h3 id="Anmeldung">Anmeldung:</h3> <form> <input type="name" placeholder="Name" required> <input type="name" placeholder="Vorname" required> <select id="terminauswahl"> </select> <input type="email" placeholder="E-Mail" required> <input type="submit" placeholder="Senden" id="ud_send"> </form>
  • Ich hab alles noch mal übernommen, es funktioniert nicht, das Feld ist weiß ich schreibe jetzt nochmal die JavaScript Datei und zusätzlich noch den CSS Auschnitt:


    Hier das JavaScript:

    Code
    1. function myParseDate(rows, rowIdx) { var datearr = rows[rowIdx].cells[1].innerHTML.split("."); var timearr = rows[rowIdx].cells[2].innerHTML.split(":"); return new Date(parseInt(datearr[2]), parseInt(datearr[1]) - 1, parseInt(datearr[0]), parseInt(timearr[0]), parseInt(timearr[1]), 0); } var now = new Date().getTime(); var rows = document.getElementById("termine").rows; var nextTime = new Date(2099, 0, 1).getTime(); var rowIdx = 1; for (var i = 1; i < rows.length; i++) { var currentTime = myParseDate(rows, i).getTime(); if (currentTime < nextTime && currentTime > now) { rowIdx = i; nextTime = currentTime; } } console.log(rowIdx); rows[rowIdx].style.backgroundColor = "mistyrose"; rows[rowIdx].style.border = "thin solid red"; document.getElementById("sThema").innerHTML = rows[rowIdx].cells[0].innerHTML; document.getElementById("sDatum").innerHTML = rows[rowIdx].cells[1].innerHTML; document.getElementById("sUhrzeit").innerHTML = rows[rowIdx].cells[2].innerHTML; document.getElementById("sOrt").innerHTML = rows[rowIdx].cells[3].innerHTML;
    2. var terminauswahl = document.getElementById("terminauswahl"); terminauswahl.innerHTML = ""; for (var i = 0; i < rows.length; i++) { var time = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML; var opt = document.createElement("option"); opt.value = time; opt.innerHTML = time; terminauswahl.appendChild(opt); }



    Und hier das CSS:


    Code
    1. select { margin: 10% 10% 0% 10%; width: 70%; padding: 5%; padding-right: auto; padding-left: auto; display: block; }
  • Also jetzt funktioniert es, nur wird der Januartermin auch mit angezeigt, aber der ist ja gar nicht mehr aktuell.

  • Das lässt sich leicht beheben:


    var terminauswahl = document.getElementById("terminauswahl");
    terminauswahl.innerHTML = "";
    for (var i = 0; i < rows.length; i++) {
    var currentTime = myParseDate(rows, i).getTime();
    if (currentTime > now || i == 0) {
    var timeStr = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML;
    var opt = document.createElement("option");
    opt.value = timeStr;
    opt.innerHTML = timeStr;
    terminauswahl.appendChild(opt);
    }
    }

  • Also Vielen Dank, es funktioniert jetzt.


    Das mit dem PHP überlege ich mir...


    Nochmal die Frage, soll ich dich auf der Webseite erwähnen, oder in dieses Forum verweisen o.ä.?