Hervorhebung einer Tabellenzeile in JavaScript

  • Hallo,


    Dies ist mein erstes Thema und ich habe folgendes Problem:



    Ich habe eine Tabelle mit 5 Zeilen, in jeder Zeile ist eine Info zu einem Workshop-Termin. Ich möchte den jeweils aktuellsten Termin mit JavaScript hervorheben (über CSS Border)


    Ich würde mich Freuen, wenn mir jemand hilft.


    Viele Grüße
    Capro16

  • Vielen Dank erstmal für deine Antwort, ich bin gerade echt am Verzweifeln ?(


    d. h. in einer Spalte steht jeweils Datum/Uhrzeit?

    Ja das stimmt in einer Spalte stehen die Daten und in einer anderen die Uhrzeit


    In welchen Format?

    In diesem (var Datum1 = new Date(2017, 12, 21);) stehen sie im Quellcode, aber ich möchte sie so auf der Webseite haben (21.12.2017), das heißt man muss die Daten auch noch umformatieren.


    Viele Grüße
    Capro16

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

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




    Und das mein JavaScript-Code


    Viele Grüße
    Capro16

  • Zitat

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

    Ja, diese Foren-Software ist eine Katastrophe. Es gibt aber Online-Tools, mit denen man es neu formatieren kann. Ich sehe es mir dann mal an.

  • Ich hoffe, dies ist das, was Du dir vorgestellt hast:
    http://pastebin.com/MZe1bMrC


    Damit "border" für die Zeile funktionierte, musste ich das CSS "border-collapse:collapse" hinzu fügen, siehe:
    http://stackoverflow.com/quest…nd-tr-element-doesnt-show


    PS: Ich habe da noch einen kleinen Fehler gemacht. So ist es richtig:



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


    (vorletzte Zeile)

  • 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! :thumbup:

  • Zitat

    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?

    Genau, die Funktion myParseDate liest die beiden Strings für Datum und Uhrzeit jeweils aus der aktuellen Zeile aus und macht daraus ein Date-Objekt.

    Zitat

    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?

    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.


    Die Meldung von Dreamweaver kannst Du ignorieren.

  • 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 :D )


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

  • Zitat

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

    Ja, die Uhrzeit wird auch berücksichtigt, d. h. wenn zwei Termine am selben Tag sind wird der frühere hervor gehoben.

    Zitat

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

    Richtig, Du musst der zweiten Tabelle eine andere ID geben und kannst dann mit

    JavaScript
    row[i].cell[j].innerHTML

    den Inhalt jeder Zellen setzen. Wenn Du es noch nicht selber kannst, dann poste das HTML der Tabelle, wo es angezeigt werden soll und ich zeige dir, wie es geht.

    Zitat

    ... erstmal JavaScript so zu lernen, dass ich mir selber helfen kann..

    Dann bist Du hier schon an der richtigen Adresse, denn es gibt Tutorials, u. a. auch für Javascript.

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


    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>
  • Da Du den Zellen IDs gegeben hast, ist es noch einfacher:



    rows[rowIdx].style.backgroundColor = "lightblue";
    rows[rowIdx].style.border = "thin solid blue";
    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;

  • 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 :thumbup:


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


    Und nochmals
    Vielen Dank!

Jetzt mitmachen!

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