Hervorhebung einer Tabellenzeile in JavaScript

  • 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; }
  • 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);
    }
    }