ID dynamsich ändern

[Nils]

Moin Moin....

...ich hab ein kleines Problem, bei dem ich nicht weiterkomme.

Ich muß in einer Tabelle xml-Daten wiedergeben.
Dabei sollen die "geraden" Zeilen weiß, die "ungeraden" Zeilen grau sein.

Ich hab das schon mit einer Schleife versucht, die bei (Zeile%2 != 0)
die Hintergrundfarbe ändern soll.

Leider kann ich ja die ID der Zeile (<tr id="zeile">) nicht ändern und nach einem durchlauf erkennt der das Objekt nicht mehr.
Kann man die ID irgendwie auch dynamisch machen?

Danke für die Hilfe....

....Nils

[Cheatah]

Hi,

Dabei sollen die "geraden" Zeilen weiß, die "ungeraden" Zeilen grau sein.

CSS/3.0 bietet dazu die Pseudoklasse :nth-child() an. Leider mangelt es an der Unterstützung seitens der Browser.

Ich hab das schon mit einer Schleife versucht, die bei (Zeile%2 != 0)
die Hintergrundfarbe ändern soll.

Gangbarer Weg, wenn Dir klar ist, dass bei deaktiviertem JavaScript die Farben wie gehabt bleiben.

Leider kann ich ja die ID der Zeile (<tr id="zeile">) nicht ändern und nach einem durchlauf erkennt der das Objekt nicht mehr.
Kann man die ID irgendwie auch dynamisch machen?

Wieso möchtest Du die ID ändern? An der IDentifikation des Elements ändert sich nichts.

Cheatah

[Nils]

Hi Cheatah,

beim 1. Durchlauf der Schleife ändert er die Farbe.
Danach fehlt irgendwie der Bezug zum Objekt.

Also denke ich mal, das in der Schleife die ID geändert werden muß, oder?

[Cheatah]

Hi,

beim 1. Durchlauf der Schleife ändert er die Farbe.
Danach fehlt irgendwie der Bezug zum Objekt.

der Bezug darf nicht geändert werden. Wieso durchläufst Du die Tabelle eigentlich mehrmals?

Also denke ich mal, das in der Schleife die ID geändert werden muß, oder?

Nein, auf keinen Fall. Die Identifikation der Zeile zu verändern ist - sowohl theoretisch als auch offenbar - das Letzte, was Du willst.

Cheatah

[Nils]

Das ist eine Tabelle, die dynamisch mit XML Daten versorgt wird.
Also ich weiß nicht wie viele Zeilen es gibt.
Diese "Tabelle" wird in einer  xsl:for-each Schleife erstellt.

Er ändert aber lediglich die erste Zeile.
Wieso auch immer!?!??!?

[Cheatah]

Hi,

Diese "Tabelle" wird in einer  xsl:for-each Schleife erstellt.

also ist es ein XSLT-, kein DHTML-Problem?

Er ändert aber lediglich die erste Zeile.
Wieso auch immer!?!??!?

Keine Ahnung, ich kann erst wieder ab Mittwoch hellsehen.

Kannst Du bitte Dieters Aufforderung nachkommen?

Cheatah

[Nils]

Das Skript habe ich mal hochgeladen....

vielleicht ist es denn ein wenig verständlicher?

Nils

[Hopsel]

Hi,

Wieso auch immer!?!??!?

weil mit dem Attribut id ein dateiweit eindeutiger Bezeichnername vergeben wird, der auch nur ein einziges Mal im Dokument vorkommen darf.

MfG Hopsel

[Dieter Raber]

Hallo Nils,

Kannst Du deinen Code mal posten?

Gruß,

Dieter

[Nils]

Klar....

<table>
<xsl:for-each select="SATZ">
   <tr id="id1">

<script language="JavaScript" type="text/javascript">
     var el = document.getElementById("id1");
     var count = <xsl:value-of select="position()"/>;
     var mod = (count%2);

if(mod != 0)
     {
      el.style.backgroundColor="#00ffcc";
     }
     else
     {
      el.style.backgroundColor="#aabbcc";
     }
    </script>

<td>
     Satz<xsl:value-of select="position()"/>&#160;
    </td>
    <td class="courier" >
     <xsl:value-of select="Name"/>&#160;
    </td>
    <td class="courier">
     <xsl:value-of select="Vorname"/>&#160;
    </td>
    <td class="courier">
     <xsl:value-of select="Datum"/>&#160;
    </td>
    <td class="courier">
     <xsl:value-of select="MA-NR"/>&#160;
    </td>

</xsl:for-each>
   </table>

[Dieter Raber]

Hallo Nils,

Meine XML-Kenttnisse sind leider bescheiden, aber vom Javascript-Standpunkt aus wuerde ich das anders machen

var el = document.getElementById("id1");

hier wuerde ich document.getElementsByTagName('tr') oder ('td') verwenden, dann hast du alle Zeilen/Zellen in einem Array, durch das du mit for durchgehen kannst. Moeglicherweise musst du dann noch eine 2. Bedingung einbauen, falls Du dich nicht auf alle Zeilen beziehst, sondern nur auf jene, die einen bestimmten parentNode haben (oder einen bestimmten className, wie auch immer.

el.style.backgroundColor="#00ffcc";

Ich wuerde eher die Eigenschaft className aendern, weil du dann die Klasse von ausserhalb in einem Stylesheet jederzeit aendern kannst.

<td class="courier" >

Wenn courier bedeutet, dass die Zelle die Schriftart Courier hat, ist der Klassenname schlecht gewaehlt, morgen wird die Lucida Console vielleicht besser gefallen.

Die letzten beiden Anmerkungen haben natuerlich nichts mit deinem Problem zu tun. Denk trotzdem mal drueber nach.

Gruß,

Dieter

[Cheatah]

Hi,

<script language="JavaScript" type="text/javascript">
     var el = document.getElementById("id1");
     var count = <xsl:value-of select="position()"/>;

Du vermischst hier zwei Welten miteinander, die völlig voneinander getrennt sind. Der XSLT-Code kommt entweder beim Client gar nicht erst an, oder er wird dort als allererstes ersetzt. In Folge dessen erzeugst Du hier in jeder einzelnen Zeile auf's Neue den selben JavaScript-Code - zudem an ungültiger Stelle. Die dahinter stehende Funktionalität kannst Du im übrigen komplett durch XSLT handhaben lassen, ganz ohne JavaScript.

Cheatah

[nils]

Hi,

<script language="JavaScript" type="text/javascript">
     var el = document.getElementById("id1");
     var count = <xsl:value-of select="position()"/>;

Du vermischst hier zwei Welten miteinander, die völlig voneinander getrennt sind. Der XSLT-Code kommt entweder beim Client gar nicht erst an, oder er wird dort als allererstes ersetzt. In Folge dessen erzeugst Du hier in jeder einzelnen Zeile auf's Neue den selben JavaScript-Code - zudem an ungültiger Stelle.

Das stimmt so nicht. Ich hab mir die Werte mal ausgeben lassen. Da bekomm ich ganz genau die Werte die ich haben will.

Die dahinter stehende Funktionalität kannst Du im übrigen komplett durch XSLT handhaben lassen, ganz ohne JavaScript.

Und wie geht das?

Cheatah

[Cheatah]

Hi,

Du vermischst hier zwei Welten miteinander, die völlig voneinander getrennt sind. Der XSLT-Code kommt entweder beim Client gar nicht erst an, oder er wird dort als allererstes ersetzt. In Folge dessen erzeugst Du hier in jeder einzelnen Zeile auf's Neue den selben JavaScript-Code - zudem an ungültiger Stelle.
Das stimmt so nicht. Ich hab mir die Werte mal ausgeben lassen. Da bekomm ich ganz genau die Werte die ich haben will.

ich habe nicht bezweifelt, dass nicht die Werte kommen, welche Du gerne hättest. Meine Zweifel betreffen eher Deine Wünsche an sich.

Die dahinter stehende Funktionalität kannst Du im übrigen komplett durch XSLT handhaben lassen, ganz ohne JavaScript.
Und wie geht das?

Was meinst Du damit? Du hantierst doch bereits recht kreativ mit XSLT. Nutze Dein Wissen.

Cheatah

[MudGuard]

Hi,

<xsl:for-each select="SATZ">
   <tr id="id1">

Sollte es mehr als ein SATZ-Element im XML geben, erzeugst Du invaliden HTML-Code, da es mehrere Elemente mit derselben Id gibt.
Das ist in (X)HTML nicht zulässig.

<script language="JavaScript" type="text/javascript">
     var el = document.getElementById("id1");
     var count = <xsl:value-of select="position()"/>;

Warum erzeugst Du nicht gleich im XSLT verschiedene ids bzw. verschiedene class- oder style-Attribute?

cu,
Andreas

[JürgenB]

Hallo Nils,

mit getElementById kommst Du an die Tabelle, und mit get ElementsByTagname kommst Du an die Zeilen deren CSS-Eigenschaften Du dann in einer for-Schleife mit Zweiersprung anpassen kannst.

Siehe z.B. http://de.selfhtml.org/javascript/objekte/document.htm und http://de.selfhtml.org/javascript/objekte/node.htm.

Ungetestetes Codebeispiel:

  
 var tab=document.getElementById("Id_der_Tabelle");  
 var tbdy=tab.getElementsByTagName("tbody")[0];  
 var tz=tbdy.getElementsByTagName("tr");  
 var nzeilen=tz.length;  
  for (z=1;z<nzeilen;z+=2) {  
    tz[z].style="backgroundColor:#808080"; // oder .bgColor=...  
  }  

Gruß, Jürgen