Beiträge von Gast16

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.ä.?

Also jetzt funktioniert es, nur wird der Januartermin auch mit angezeigt, aber der ist ja gar nicht mehr aktuell.

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:

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;
 		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:

select {	margin: 10% 10% 0% 10%;	width: 70%;	padding: 5%;	padding-right: auto;	padding-left: auto;	display: block;	}

Und wo liegt der Fehler dann?

Ist doch drin

Du investierst aber viel Zeit in mein Projekt...

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

Wir können ja erstmal dieses Problem angehen:

Zitat von Capro16

Irgendwo ist ein Fehler, das Selectfeld ist leer

Ich habe hier mal den HTML-Code:

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

Irgendwo ist ein Fehler, das Selectfeld ist leer

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

Dann muss ich die Options aber noch mit:

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

füllen oder?

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

Ja wäre auch ok, dann müsste ich halt die Formularvalidierung selber programmieren aber es ist ok.

Ok da hätte ich vielleicht auch drauf kommen können, aber trotzdem Vielen Dank.

Jetzt hätte ich nur noch eine Frage, kann ich das mit einem Formular <input type="date"> so verknüpfen, dass nur die Daten aus der Tabelle möglich sind auszuwählen?

Ansonsten bin ich wunschlos glücklich

Soll ich dich auf der Webseite erwähnen oder auf html-seminar verlinken?

Und nochmals
Vielen Dank!

Also ich traue mich nicht deinen Code zu verändern ich habe zwar eine Sicherheitskopie aber trotzdem weiß ich nicht so richtig wie man es macht...

Daher hier der HTML Code:

<div id="sidebar">		 <h4>Neue Termine:</h4>		 <table id= "sidebartabelle">		 <tr><td id="sThema">Soul Movements</td></tr>		 <tr class="zweitezeile"><td id="sDatum">15.11.2017</td></tr>		 <tr><td id="sUhrzeit">12:35</td></tr>		 <tr class="zweitezeile"><td id="sOrt">Kursort 2</td></tr>		 </table>	 </div>

Zitat von Sempervivum

Am Ende des Skripte steht in der Variablen rowIdx der Index der Zeile mit dem nächsten Termin. Dort kannst Du die Werte auslesen.
rows[rowIdx],cells[3].innerHTML liefert z. B. den Ort der Veranstaltung.

Aber wie spreche ich die andere Tabelle separat an? Mit der ID?

Und habe ich den Code richtig verstanden, dass der aktuelle Termin auch nach der Uhrzeit aktualisiert wird? (Super )

Und mein nächstes Ziel nach dem Skript wird sein, erstmal JavaScript so zu lernen, dass ich mir selber helfen kann...

Ja da sieht schonmal super aus, Top!

Danke!

Bei mir zeigt Dreamweaver in Zeile 2 folgenden Fehler an: Missing "use strict" statement. Was ist das?

Außerdem wollte ich fragen, ob dein Code das Datum aus HTML quasi erkennt, das heißt, kann ich also das Datum in der Tabelle in HTML ändern und JavaScript erkennt das oder?

Und ich wollte noch eine Funktion hinzufügen:

Also in jeder Tabellenspalte wird das Workshopthema angezeigt, das Datum, die Uhrzeit und der Ort. Jetzt will ich alle diese Sachen NUR von dem aktuellsten Datum dem "eingerahmten" in einer neuen Tabelle (Sidebar) anzeigen lassen, wie mache ich das?

Du hast mir bis jetzt echt total gut geholfen. Vielen Dank!

Aber die Variable Aktuelles Datum ist dazu da um "Heute" herauszufinden

Ja

Zitat von Sempervivum

Es gibt aber Online-Tools, mit denen man es neu formatieren kann. Ich sehe es mir dann mal an.

Also hab ich das richtig verstanden, dass du das neu formatierst, oder muss ich das machen?

Also im Moment sind alle Tabellenzeilen rot markiert, ich will aber nur, das die aktuellste rot umrandet wird.

Oh er hat leider keine Zeilenumbrüche eingefügt Sorry Hoffe es geht trotzdem

Zitat von Sempervivum

Poste am besten eine Beispieltabelle, dann kann man das Javascript entwickeln.

<table id="termine">	  <thead>		<tr>			<th><strong>Thema</strong></th>			<th><strong>Datum</strong></th>			<th><strong>Uhrzeit</strong></th>			<th><strong>Ort</strong></th>		</tr>	  </thead>	  	  <tbody>		<tr>			<td>Beispiel</td>			<td id="Datum1">21.12.2017</td>			<td>12:15</td>			<td>Kursort 1</td>		</tr>				<tr class="zweitezeile">			<td>Beispiel</td>			<td id="Datum2">15.12.2017</td>			<td>13:45</td>			<td>Kursort 2</td>		</tr>				<tr>			<td>Beispiel</td>			<td id="Datum3">04.10.2017</td>			<td>12:15</td>			<td>Kursort 1</td>		</tr>				<tr class="zweitezeile">			<td>Beispiel</td>			<td id ="Datum4">03.03.2017</td>			<td>12:15</td>			<td>Kursort 2</td>			</tr>					<tr>			<td>Beispiel</td>			<td id="Datum5">05.01.2017</td>			<td>12:15</td>			<td>Kursort 1</td>		</tr>	   </tbody>	</table>	<script src="../Js/script.js"></script>

Das ist der HTML Code

var aktuellesDatum = new Date();
var Datum1 = new Date(2017, 12, 21);var Datum2 = new Date(2017, 12, 15);var Datum3 = new Date(2017, 10, 4);var Datum4 = new Date(2017, 3, 3);var Datum5 = new Date(2017, 1, 5);
if (Datum1 > aktuellesDatum) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[1].style.border = "thin solid red";}
if (Datum1 < Datum2 && Datum1 < Datum3 && Datum1 < Datum4 && Datum5) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[1].style.border = "thin solid red";}




if (Datum2 > aktuellesDatum) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[2].style.border = "thin solid red";}
if (Datum2 < Datum1 && Datum2 < Datum3 && Datum2 < Datum4 && Datum2 < Datum5) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[2].style.border = "thin solid red";}




if (Datum3 > aktuellesDatum) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[3].style.border = "thin solid red";}
if (Datum3 < Datum1 && Datum3 < Datum2 && Datum3 < Datum4 && Datum3 < Datum5) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[3].style.border = "thin solid red";}
if (Datum4 > aktuellesDatum) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[4].style.border = "thin solid red";}
if (Datum4 < Datum1 && Datum4 < Datum2 && Datum4 < Datum3 && Datum4 < Datum5) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[4].style.border = "thin solid red";}




if (Datum5 > aktuellesDatum) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[5].style.border = "thin solid red";}




if (Datum5 < Datum1 && Datum5 < Datum2 && Datum5 < Datum3 && Datum5 < Datum4) {	var meineTabelle = document.getElementById("termine");	meineTabelle.rows[5].style.border = "thin solid red";}

Und das mein JavaScript-Code

Viele Grüße
Capro16