Ankündigung

Einklappen
Keine Ankündigung bisher.

Tabellenspalten färben mit Java-Script / JavaScript

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Tabellenspalten färben mit Java-Script / JavaScript

    hi.
    ich habe ein JS-problem ... ja .. ich verwende es tatsächlich
    aber nur im zuge eines auftrags.

    nun gut.
    ich habe mir hier:
    http://www.styleassistant.de/tips/tip90.htm
    einen code besorgt, der mir die tabellenspalten einer tabelle farblich verändern soll, wenn man mit der maus über die spalte fährt.
    alles klar ..

    den code habe ich mal in meinen head-bereich eingefügt und angepasst .. es klappt auch .. aber nicht so, wie ich das will und vor allem auch nicht immer.

    der code im head:
    Code:
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    
    function changeColor(color,col)
    {
      if(document.getElementById && document.getElementsByTagName)
      {
        var tab=document.getElementById("pool");
        var tabtr=tab.getElementsByTagName("tr");
        for(i=0;i<tabtr.length;i++)
        {
          tabtr[i].childNodes[col-1].style.backgroundColor=color;
        }
      }
    }
    
    //-->
    </SCRIPT>
    die tabelle hat die id "pool".
    das ich den namen der funktion geändert habe, sollte ja eigentlich keinerlei auswirkungen haben.

    Code:
    <table id="pool">
                     <tr>
                        <td style="background-color:#00A0A0;">
                          
                        </td>
                        <td style="background-color:#00A0A0;"
                            onmouseover="changeColor('#CFCFCF',2)" onmouseout="changeColor('#00A0A0',2)">
                          Montag
                        </td>
                        <td style="background-color:#00A0A0;"
                            onmouseover="changeColor('#CFCFCF',3)" onmouseout="changeColor('#00A0A0',3)">
                          Dienstag
                        </td>
                     </tr>
                     <tr>
                       <td>
                        08.15 - 09.45
                       </td>
                       <td>
                        Übung Programmieren II
                        
    
                        Hr. Franz
                       </td>
                       <td>
                        Informatik 1
                       </td>
                     </tr>
    [...]
    </table>
    ich weiß, dass der code total beschissen ist .. aber er ist ja auch nicht mir, sondern gehört zum internetauftritt meiner FH. ich habe schon versucht, da das beste draus zu machen. aber ich habe nicht die befugnis zu starke änderungen an dem code durchzuführen. .. selbst schuld.

    nunja.
    wenn ich jetzt also über die zelle mit inhalt "montag" fahre, dann wird die erste spalte, also die spalte mit den uhrzeiten, grau gefärbt ... warum?
    es soll ja die spalte "montag" gefärbt werden.
    wenn ich aus der 2 eine 3 mache (im funktionsaufruf), dann klappt gar nichts mehr.
    weiterhin ist es auch so, dass gar nichts passiert, wenn ich über die spalte "dienstag" mit der maus fahre.

    also ich habe jetzt echt alle register gezogen, die ich zur verfügung habe .. in sachen JS leider nicht wirklich viele .. aber naja.

    wenn mir hier jemand einen lösungsansatz geben kann wäre ich sehr dankbar.

    danke im voraus.
    grüße ben
    privater Blog


  • #2
    Bisserl umständlich.
    Code:
    <td style="background-color:#00A0A0;" 
                onmouseover="this.style.backgroundColor='#CFCFCF';" onmouseout="this.style.backgroundColor='#00A0A0';">

    Kommentar


    • #3
      lesen junge .. lesen.

      ich will nicht eine zelle, sondern die gesamte spalte färben.

      trotzdem danke ..
      privater Blog

      Kommentar


      • #4
        Versieh die <td> mit ids ..

        <td id="r1c1">

        Merk dir in einer Variablen, wieviele Zeilen vorhanden sein müssen ...

        In einer schleife kannst du es dann durchlaufen ....

        Kommentar


        • #5
          Zitat von Ben
          lesen junge .. lesen.

          ich will nicht eine zelle, sondern die gesamte spalte färben.

          trotzdem danke ..
          Uuups, naja die Brille.

          Dein Fehler scheint woanders zu liegen, zumindest beim IE geht die Funktion wie gewollt.

          Maus auf Montag => Spalte 2 wird markiert.
          Maus auf Dienstag => Spalte 3 wird markiert.

          Kommentar


          • #6
            Zitat von Guradia
            Versieh die <td> mit ids ..

            <td id="r1c1">

            Merk dir in einer Variablen, wieviele Zeilen vorhanden sein müssen ...

            In einer schleife kannst du es dann durchlaufen ....
            ja gut .. Javascript also .. äh .. ich hab keine ahnung was du mir sagen willst.


            mich interessiert zunächst einmal warum der obige code nicht funktioniert .. denn eigentlich sollte er das ja tun.
            hier geht es ja auch:
            http://www.styleassistant.de/tips/beispiel90.htm

            dieser code ist ja eigentlich relativ simpel .. deshalb hab ich ihn ja auch gewählt.
            ich will hier jetzt keinen exkurs in JS haben .. ich werde es niemals mehr verwenden .. hoffe ich
            privater Blog

            Kommentar


            • #7
              Zitat von DiBo33
              Dein Fehler scheint woanders zu liegen, zumindest beim IE geht die Funktion wie gewollt.

              Maus auf Montag => Spalte 2 wird markiert.
              Maus auf Dienstag => Spalte 3 wird markiert.

              tatsächlich ..
              aber im mozilla klappt das nicht ..
              privater Blog

              Kommentar


              • #8
                tatsächlich ..
                aber im mozilla klappt das nicht ..
                Doch im Firebird gehts auch, aber erst nachdem ich innerhalb der "TR" die Zeilenumbrüche entfernt hatte.

                <tr><td ...>Inhalt</td>...</tr>

                Also jede Tabellenzeile auch in einer Zeile.

                (edit)
                Das sollte Abhilfe schaffen:
                Code:
                    tabtr[i].getElementsByTagName("td")[col-1].style.backgroundColor=color;
                (/edit)

                Kommentar


                • #9
                  hi.
                  danke ich werde das später mal versuchen.

                  bin gerade etwas im stress .. vorgesetzte und so ..

                  danke ..
                  privater Blog

                  Kommentar

                  Lädt...
                  X