tr8000: Zeile einer Tabelle markieren

Moin!
Folgendes Javascript läuft weder im IE noch im Firefox und spuckt auch keine Fehlermeldungen aus. *confused*
Kann mir vielleicht einer von euch helfen?
Im Voraus vielen Dank!

##############
test.html

<html><head>
<title>Test</test>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<tr name="0"><td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow(0)" /></td><td>&nbsp;</td>
<tr name="1"><td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow(1)" /></td><td>&nbsp;</td>
</body></html>

##############
javascript.js:

function selectrow(zeile) {
    rows = document.getElementsByTagName("tr");
    for ( i=0; i<rows.length; i++ ) {
 if ( rows[i] == zeile ) {
     rows[i].style.backgroundColor="yellow";
 }
    }
}
##############

  1. Hello out there!

    Folgendes Javascript läuft weder im IE noch im Firefox und spuckt auch keine Fehlermeldungen aus. *confused*

    Weil kein Fehler vorliegt. Jedenfalls kein Syntax- oder Laufzeitfehler.

    if ( rows[i] == zeile )

    Meinst du, diese Bedingung wäre irgendwann erfüllt?

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    1. if ( rows[i] == zeile )

      Meinst du, diese Bedingung wäre irgendwann erfüllt?

      wenn die for-schleife an der zeile angelangt ist, die ich ausgewählt habe?!

      1. Mahlzeit,

        if ( rows[i] == zeile )

        Meinst du, diese Bedingung wäre irgendwann erfüllt?

        wenn die for-schleife an der zeile angelangt ist, die ich ausgewählt habe?!

        Wieso sollte sie dann erfüllt sein? Ein <tr>-Element (also ein Objekt in JS) ist irgendwie nicht das gleiche wie eine Integer-Zählvariable ... :-)

        MfG,
        EKKi

        1. aah... ich Dumpfbacke
          *hand vs stirn*

          => rows[i].name == zeile

          1. Ich hab ein neues Problem entdeckt:
            FF macht da leider nicht mit!
            irgendwas muss noch unkonform sein... ;P
            (Sorry bin halt anfänger)

            1. Mahlzeit,

              Ich hab ein neues Problem entdeckt:
              FF macht da leider nicht mit!
              irgendwas muss noch unkonform sein... ;P
              (Sorry bin halt anfänger)

              Ich denke, es ist grundsätzlich eine schlechte Idee, irgendeiner Zeile in irgendeiner Tabelle irgendwo auf der Seite den doch recht allgemeinen Namen "0" (bzw. "1") zu verpassen ... einerseits weiß ich nicht, ob der eine oder andere Browser bei rein numerischen Namen nicht doch rumzickt, andererseits kommst du spätestens dann in Schwierigkeiten, wenn du den gleichen Anklick-Effekt bei mehreren Tabellen erzielen willst.

              Wieso nimmst Du keine Namen wie "row_0", "zeile_1", tralala_3" oder was auch immer?

              MfG,
              EKKi

              1. Wieso nimmst Du keine Namen wie "row_0", "zeile_1", tralala_3" oder was auch immer?

                danke, härt sich sehr plausibel an.
                hab das ganze entsprechend abgeändert und die tr's nennen sich nun row_0 , row_1, usw.

                <tr name="row_0"><td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow(row_0)" />

                zusätzlich möchte ich bei einem zweiten klick, dass sich die Farbe wieder ändert.
                Leider funktioniert das wie folgt nicht...

                function selectrow(zeile) {
                    rows = document.getElementsByTagName("tr");
                    for ( i=0; i<rows.length; i++ ) {
                 if ( !SIEHE OBEN! ) {
                     if ( rows[i].style.backgroundColor == "yellow") {
                  rows[i].style.backgroundColor = "blue";
                     }
                     else {
                  rows[i].style.backgroundColor = "yellow";
                     }
                 }
                    }
                }

                1. Mahlzeit,

                  <tr name="row_0"><td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow(row_0)" />

                  <tr name="row_0"><td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow('row_0')" />

                  if ( !SIEHE OBEN! ) {

                  if ( rows[i].name == zeile ) {

                  MfG,
                  EKKi

                  1. jetzt stehe ich wieder vor dem Problem, dass es im IE funktioniert und im FF nicht.
                    Fehler-Konsole: nüscht

                    der Farbewechsel funktioniert auch nicht...

                    if ( rows[i].style.backgroundColor == "yellow") {
                       rows[i].style.backgroundColor = "blue";
                    }
                    else {
                       rows[i].style.backgroundColor = "yellow";
                    }

                    1. Mahlzeit,

                      jetzt stehe ich wieder vor dem Problem, dass es im IE funktioniert und im FF nicht.
                      Fehler-Konsole: nüscht

                      Vielleicht stört sich der Feuerfuchs einfach daran, dass eine Eigenschaft rows[i].style.backgroundColor schlicht und einfach nicht vorhanden ist? Immerhin definierst du ja nichts dergleichen im <tr>-Tag ...

                      Ich würde generell anraten, eine solche farbliche Auszeichnung über CSS-Klassen zu machen. Mach dir zwei Klassen

                      tr.normal {
                          background-color: #00f;
                      }

                      tr.markiert {
                          background-color: #ff0;
                      }

                      weise den Zeilen default die Klasse "normal" zu (<tr class="normal [...] >) und verändere dann in der Funktion einfach die zugehörige Klasse (rows[i].className = 'markiert';)

                      So musst du nur an einer zentralen Stelle die Farben festlegen.

                      MfG,
                      EKKi

                      1. Ich würde generell anraten, eine solche farbliche Auszeichnung über CSS-Klassen zu machen.

                        CSS eigentlich gerne. Nur hab ich leider Anweisung bekommen die vorhandene CSS nicht zu editieren :(

                        Ich erweitere jetzt mal die Codeschnipsel...

                        test.html

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                        <html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">

                        <head>
                        <script src="datacenter.js" type="text/javascript"></script>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        </head>

                        <body>
                        <table border="1" id="tab">
                        <tr name="row_0" bgcolor="#FF0000">
                        <td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow('row_0')" /></td>
                        <td>&nbsp;</td>
                        </tr>
                        <tr name="row_1" bgcolor="#FF0000">
                        <td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow('row_1')" /></td>
                        <td>&nbsp;</td>
                        </tr>
                        <tr name="row_2" bgcolor="#FF0000">
                        <td><img alt="Zeile markieren" src="highlight.gif" onclick="selectrow('row_2')" /></td>
                        <td>&nbsp;</td>
                        </tr>
                        </table>
                        </body>

                        </html>

                        javascript.js (ungekürzt)

                        var tab, rows, i, zeile;

                        //#########################################
                        //## Zeilenmarkierung

                        function selectrow(zeile) {
                            tab = document.getElementById("tab");
                            rows = tab.getElementsByTagName("TR");
                            for ( i=0; i<rows.length; i++ ) {
                         if ( rows[i].name == zeile ) {
                             rows[i].style.backgroundColor = "yellow"
                         }
                            }
                        }

                        Also, wie gesagt: Im FF funktioniert das ganze nicht.
                        Keine Fehlermeldung!
                        Hat irgendjemand ne Idee?

                        1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          Du hast die Seite auch mal mit diesem Doctype validiert?
                          Du nutzt HTML Attribute die nicht mehr verwendet werden sollen.

                          Hat irgendjemand ne Idee?

                          Aber warum nutzt du nicht auf parentNode?

                          function selectrow(o) {  
                            
                           if(o && o.parentNode && o.parentNode.parentNode && o.parentNode.parentNode.tagName.toLowerCase() == 'tr') {  
                           o.parentNode.parentNode.style.backgroundColor = "yellow"  
                            
                           }  
                          }
                          

                          Der aufruf muss dann natürlich geändert werden onclick="selectrow(this)", dann kannst du dir das ungültige name Attribut sparen.

                          Struppi.

                          1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                            Du hast die Seite auch mal mit diesem Doctype validiert?
                            Du nutzt HTML Attribute die nicht mehr verwendet werden sollen.

                            wie validiere ich denn?

                            function selectrow(o) {

                            if(o && o.parentNode && o.parentNode.parentNode && o.parentNode.parentNode.tagName.toLowerCase() == 'tr') {
                            o.parentNode.parentNode.style.backgroundColor = "yellow"

                            }
                            }

                            funktioniert nicht! :(
                            
                            1. wie validiere ich denn?

                              Du kennst google?

                              funktioniert nicht! :(

                              Natürlich funktioniert das, ich hab es mit deinem Code ausprobiert.

                              Struppi.

                              1. Natürlich funktioniert das, ich hab es mit deinem Code ausprobiert.

                                Struppi.

                                okay, mein fehler...
                                aber leider funktioniert das ganze jetzt im IE nicht mehr?!
                                Browserweiche? naja...

                                1. aber leider funktioniert das ganze jetzt im IE nicht mehr?!

                                  Doch es funktioniert im IE 7.

                                  Browserweiche? naja...

                                  wozu?

                                  Struppi.

                                  1. aber leider funktioniert das ganze jetzt im IE nicht mehr?!

                                    Doch es funktioniert im IE 7.

                                    hier wird IE6 benutzt..

                                    1. aber leider funktioniert das ganze jetzt im IE nicht mehr?!

                                      Doch es funktioniert im IE 7.

                                      hier wird IE6 benutzt..

                                      Danke, dass du so hilfreich bist uns bei deinem Problem zu helfen.

                                      Ich verabschiede mich aus dem Thread, denn diese Aussage stimmt nicht. Und statt das du deine Beobachtungen irgendwie belegst, kommt permaent nur "funktioniert nicht", was mich (und andere die dir helfen wollen) dazu zwingt ein Beispiel zu basteln, um dann festzustellen das du uns nicht die Wahrheit sagst oder irgendwas verschweigst.

                                      Struppi.

                                      1. Danke, dass du so hilfreich bist uns bei deinem Problem zu helfen.

                                        sorry, dass mach ich sicher nicht weil ich keine lust dazu hab und andere für mich arbeiten lassen will...
                                        ich finds klasse dass hier überhaupt für lau geholfen wird.
                                        nur leider bin ich permanent im stress und kann nur hin und wieder mal ein blick auf das script werfen!
                                        dazu kommt dass ich javascript anfänger bin, genauergesagt fast noch nie was damit zu tun hatte

                                        zum script:

                                        firefox: das script funktioniert wie es soll
                                        ie7: kann ich leider nicht überprüfen
                                        ie6:
                                        funktioniert leider nicht. ohne fehlermeldung o.Ä.
                                        ich hab es auch auf anderen maschinen probiert!

                                        mehr kann ich dazu nicht sagen...
                                        danke für die hilfe!

                            2. if(o && o.parentNode && o.parentNode.parentNode && o.parentNode.parentNode.tagName.toLowerCase() == 'tr') {
                              o.parentNode.parentNode.style.backgroundColor = "yellow"

                              }
                              }[/code]

                              funktioniert nicht! :(

                              okay mein fehler.
                              nur funktioniert jetzt zwar im FF aber nicht mehr im IE!

                              1. nur funktioniert jetzt zwar im FF aber nicht mehr im IE!

                                Bei mir schon.

                                Struppi.

                2. außerdem hab ich noch mit der Fehlermeldung

                  'row_0 ist not defined'
                  (zB bei anklicken der ersten Zeile)

                  zu kämpfen!

                  1. Mahlzeit,

                    außerdem hab ich noch mit der Fehlermeldung

                    'row_0 ist not defined'
                    (zB bei anklicken der ersten Zeile)

                    zu kämpfen!

                    Kein Wunder - das Objekt row_0 gibt es ja auch nicht. :-) Du musst der Funktion schon den Namen einer Zeile (als String) übergeben ... siehe andere Antwort.

                    MfG,
                    EKKi

          2. aah... ich Dumpfbacke
            *hand vs stirn*

            => rows[i].name == zeile

            Bingo! Mega-korrekt wäre

            rows[i].name === String(zeile)

            oder

            Number(rows[i].name) === zeile

            Gruß, Don P

            1. rows[i].name === String(zeile)

              Quatsch!
              der Wert des name-Attribut darf nicht mit einer Ziffer beginnen (schon gar nicht aus einer Zahl bestehen), spielt hier aber nur eine untergeordnete Rolle, denn tr hat gar kein name-Atribut).

              1. Hello out there!

                Quatsch!
                der Wert des name-Attribut darf nicht mit einer Ziffer beginnen (schon gar nicht aus einer Zahl bestehen)

                Quatsch! 'name' hat CDATA-Werte.

                tr hat gar kein name-Atribut

                Das allerdings. Deshalb ist die 'name'-Eigenschaft eines solchen Objekts undefined.

                See ya up the road,
                Gunnar

                --
                „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
                1. Quatsch! 'name' hat CDATA-Werte.

                  Halbquatsch, nicht bei meta

                2. Hi Gunnar!

                  Quatsch!
                  der Wert des name-Attribut darf nicht mit einer Ziffer beginnen (schon gar nicht aus einer Zahl bestehen)

                  Quatsch! 'name' hat CDATA-Werte.

                  Stimmt, aber das direkt darunter stehende http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name sagt, dass erstere Aussage Korrekt ist.

                  Grüsse,
                  Richard

                  1. Hello out there!

                    Quatsch! 'name' hat CDATA-Werte.

                    Stimmt, aber das direkt darunter stehende http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name sagt, dass erstere Aussage Korrekt ist.

                    Nein.

                    1. Ist SELFHTML keine Referenz.

                    2. Hast du es falsch gedeutet: Dort steht nicht, dass 'name'-Attribute NAME-Werte hätten.

                    Wie [tippgeber] richtig anmerkte, hat das 'name'-Attribut des 'meta'-Elements NAME-Werte (in HTML; in XHTML: CDATA); für andere Elemente (und über solche reden wir hier) hat es CDATA-Werte, kann der Attributwert also auch mit einer Ziffer beginnen.

                    See ya up the road,
                    Gunnar

                    --
                    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
                    1. Hi Gunnar!

                      Jetzt kapier ich das; es gibt einen Wertquantifizierer "Name"!
                      'Tschuldigung für mein zu Tage getragenes Unverständnis. Aber nun hab ich echt was gelernt! - Und du hast natürlich Recht.

                      Danke (von Langsamsickerhirn),
                      Richard

          3. Hello out there!

            aah... ich Dumpfbacke
            *hand vs stirn*

            => rows[i].name == zeile

            Und warum nicht einfach if (i == zeile), du Dumpfbacke? ;-)

            See ya up the road,
            Gunnar

            --
            „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)