Tabellenzeile markieren

[Lauri]

Hallo!
Ich habe eine Problem mit JavaScript.
Ich bin jedoch ein JavaScript-Neuling.

Mein Problem:
Ich habe eine Tabelle mit verschiedenen Zeiten und dazugehörigen Aktionen. Jetzt möchte ich die Zeile markieren lassen, wenn es aktuell so spät ist.

Bsp (aktuelle Zeit 16:30 Uhr):
10:00 Aktion1
12:00 Aktion2
16:30 Aktion3
20:15 Aktion4

Die Zeile "16:30 Aktion3" sollte zum Beispiel gelb hinterlegt werden, also hervorgehoben werden. Wie kann ich das in JavaScript umsetzen?

Viele Grüße
Lauri

[Cheatah]

Hi,

Die Zeile "16:30 Aktion3" sollte zum Beispiel gelb hinterlegt werden, also hervorgehoben werden. Wie kann ich das in JavaScript umsetzen?

Tabelle zeilenweise durchlaufen, Zeit erkennen, vergleichen, bei positivem Vergleich der Zeile eine Klassifizierung hinzufügen, den Rest per CSS erledigen.

Cheatah

[Matthias Apsel]

Om nah hoo pez nyeetz, Cheatah!

Hi,

Die Zeile "16:30 Aktion3" sollte zum Beispiel gelb hinterlegt werden, also hervorgehoben werden. Wie kann ich das in JavaScript umsetzen?

Tabelle zeilenweise durchlaufen, Zeit erkennen, vergleichen, bei positivem Vergleich der Zeile eine Klassifizierung hinzufügen, den Rest per CSS erledigen.

So ähnlich wollte ich das auch gerade schreiben, hab es dann aber gelassen, weil das vermutlich für den OP nicht hilfreich sein wird. Dies ist eine Abholfrage, wir sollten auf Vinzenz warten und für den Anfang vielleicht mollilys Tutorial als Lektüre empfehlen.

Matthias

[Lauri (Ergänzung)]

Hallo!
Ich habe eine Problem mit JavaScript.
Ich bin jedoch ein JavaScript-Neuling.

Mein Problem:
Ich habe eine Tabelle mit verschiedenen Zeiten und dazugehörigen Aktionen. Jetzt möchte ich die Zeile markieren lassen, wenn es aktuell so spät ist.

Bsp (aktuelle Zeit 16:30 Uhr):
10:00 Aktion1
12:00 Aktion2
16:30 Aktion3
20:15 Aktion4

Die Zeile "16:30 Aktion3" sollte zum Beispiel gelb hinterlegt werden, also hervorgehoben werden. Wie kann ich das in JavaScript umsetzen?

Viele Grüße
Lauri

Danke für die Antworten schon mal, jedoch versteh ich das mit "durchlaufen" leider noch nicht (Neuling). Ich hab das jetzt so angelegt:

<script language="javascript">if(std=10 && min=0) document.writeln("<tr bgcolor="yellow">"); else document.writeln("<tr>")</script>
  <td>10:00</td>
  <td>Aktion1</td>
 </tr>

<script language="javascript">if(std=12 && min=0) document.writeln("<tr bgcolor="yellow">"); else document.writeln("<tr>")</script>
  <td>12:00</td>
  <td>Aktion2</td>
 </tr>

<script language="javascript">if(std=16 && min=30) document.writeln("<tr bgcolor="yellow">"); else document.writeln("<tr>")</script>
  <td>16:30</td>
  <td>Aktion3</td>
 </tr>

<script language="javascript">if(std=20 && min=15) document.writeln("<tr bgcolor="yellow">"); else document.writeln("<tr>")</script>
  <td>20:15</td>
  <td>Aktion4</td>
 </tr>

unter std sind Stunde und unter min die Minute abgespeichert.
Irgendwie funktioniert das aber auch noch nicht! - Was mache ich da falsch?

Viele Grüße
Lauri

[Cheatah]

Hi,

Hallo!

bitte zitiere nur das, worauf Du Dich beziehst, danke sehr.

Danke für die Antworten schon mal, jedoch versteh ich das mit "durchlaufen" leider noch nicht (Neuling).

Damit ist gemeint, dass Du die Tabellenzeilen inhaltlich analysierst, nachdem sie vorliegen. Durchlaufe sie mittels der diversen DOM-Operationen und z.B. for-Schleifen.

Ich hab das jetzt so angelegt:

<script language="javascript">if(std=10 && min=0) document.writeln("<tr bgcolor="yellow">"); else document.writeln("<tr>")</script>

Dann hättest Du also innerhalb eines <table>- oder <tbody>-Elements <script> als Kind. Ich weiß zwar nicht, welchen HTML-Dialekt Du verwendest; aber da Du schon das überflüssige language-Attribut anstelle des (i.d.R.) zwingend benötigten type-Attributs verwendest, gehe ich davon aus, dass <script> hier verboten ist.

Cheatah

[gast42]

Danke für die Antworten schon mal, jedoch versteh ich das mit "durchlaufen" leider noch nicht (Neuling). Ich hab das jetzt so angelegt:

Ich habe mal ein paar Änderungen eingefügt

 <table>  
<thead>  
<tr>  
  <th>Uhrzeit</th>  
  <th>Aktion</th>  
</tr>  
</thead>  
<tbody id="aktionstabelle">  
<tr>  
  <td>10:00</td>  
  <td>Aktion1</td>  
</tr>  
<tr>  
  <td>12:00</td>  
  <td>Aktion2</td>  
</tr>  
<tr>  
  <td>16:30</td>  
  <td>Aktion3</td>  
</tr>  
<tr>  
  <td>20:15</td>  
  <td>Aktion4</td>  
</tr>  
</tbody></table>  

du könntest jetzt nach der Tabelle folgenden Code einfügen (es gibt bessere Varianten, aber dies genügt zum Anfang):

<script type="text/javascript">  
(funktion () {  
 var heute=new Date;  
 var std=heut.getHours();  
 var min=heut.getMinutes();  
 var tabelle=document.getElementById("aktionstabelle");  
 if (tabelle) {  
  var zeile=tabelle.rows;  
  for (var i=0;i<zeile.length;i++) {  
   var spalte=rows[i].cells;  
   if (spalte.length>0) {  
    var termin=spalte[0].nodeValue.split(":");  
    if (termin.length==2 && termin[0]==std && termin[1]==min) zeile[i].className="aktuell";  
   }  
  }  
 }  
})()  
</script>

Zusammengefasst: in heute wird das aktuelle Datum erfasst und davon std und min gelesen.

dann sucht das Script die Tabelle, genauer: den tbody der Tabelle

Wenn es den gibt (das sollte der Fall sein, wenn das Script hinter der Tabelle steht) geht es alle Zeilen durch, schaut ob es mindestens 1 Spalte (<td>) gibt, liest den Inhalt der ersten und zerlegt ihn nach Std und Min.
Wenn der Vergleich stimmt bekommt die Zeile die Klasse "aktuell". Du müsstest noch im CSS dieser Klasse die gewünschten Eigenschaften geben, zB.

tr.aktuell {  
 backgroundColor:yellow;  
}

(die seltsame Umklammerung des JavaScript mittels (function() { ... })() diesnt dazu, dass dies JavaScript nicht andere evtl. vorhandene JavaScripte beeinflussen kann. Wenns keine anderen gibt kann das entfallen.)