Lefor: TD ein bzw ausblenden mit jquery

moin,

ich habe in meinem tollen html dokument eine tablle mit tr's und td's

ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

hab dafür auch zwei noch tollere css klassen angelegt:

.showimage {
display: inline;
}

.hideimage {
display: none;
}

weiß aber gerade nicht wie ich das zum laufen bekommen soll.

würde mich über eure hilfe freuen.

lg
Lefor

  1. moin,

    ich habe in meinem tollen html dokument eine tablle mit tr's und td's

    Ah ja, und was willst du mit JAVA im HTML erreichen? Oder meinst du Javascript?

    ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

    Okay, wenn du ein td ausblendest, rutschen die rechts davon auf. So soll es sein?

    hab dafür auch zwei noch tollere css klassen angelegt:

    .showimage {
    display: inline;
    }

    .hideimage {
    display: none;
    }

    Für Javascript kann ich es schreiben, aber mit jquery toggle kann ich gerade nichts anfangen.

    Linuchs

    1. @@Linuchs:

      nuqneH

      Für Javascript kann ich es schreiben, aber mit jquery toggle kann ich gerade nichts anfangen.

      [link:http://api.jquery.com/toggleClass/@title=toggleClass()] war gemain, was auch nicht anderes macht als [link:https://developer.mozilla.org/en-US/docs/Web/API/Element.classList@title=classList].toggle() in Vanilla-JS.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hi,

    ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.
    .showimage {
    display: inline;
    }

    Das ergibt keinen Sinn - wenn es eine Tabellenzelle ist, ist display: inline; falsch, dann müßte es display: table-cell; sein.

    weiß aber gerade nicht wie ich das zum laufen bekommen soll.

    Und woran scheiterst Du genau?
    Welche Methode Du von jquery benutzen willst, weißt Du doch schon. Wo liegt also das Problem?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  3. @@Lefor:

    nuqneH

    ich will jetzt die td's bei bedarf per klick ein und ausblenden können über jquery toggle.

    hab dafür auch zwei noch tollere css klassen angelegt:

    Es gibt keineCSS-Klassen“ (auch nicht mit Deppenlehrzeichen).

    .showimage
    .hideimage

    Du möchtst nicht td-Elemente ausblenden, sondern deren Inhalte (Bilder)?

    weiß aber gerade nicht wie ich das zum laufen bekommen soll.

    Wie sieht denn dein Code aus, der nicht läuft?

    Übrigens hast du dich in der Kategorie vertan.  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen …

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. ops,

      das kommt nicht wieder vor !

      ja es geht um bilder in den td's

      hatte das jetzt so:

      $("td").click( function() {}
      $(this).find("img").toggleClass("hideimage");

      aber ich weiß nicht was ich genau falsch mache da einfach nix passiert.

      lg
      Lefor

      1. @@Lefor:

        nuqneH

        hatte das jetzt so:

        $("td").click( function() {}
        $(this).find("img").toggleClass("hideimage");

        aber ich weiß nicht was ich genau falsch mache

        Die Fehlerkonsole deines Browsers sagt es dir. Eine Klammer geht nicht zu.

        da einfach nix passiert.

        Bei {} sollte das auch nicht verwundern. Eine Klammer geht an der falschen Stelle zu.

        Und wie genau soll das Bild wieder sichtbar werden?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hey Gunnar,

          schonmal Danke.

          aber ich hätte das sicherlich nicht gepostet wenn ich selber drauf gekommen wäre :P

          Die Bilder sind halt in einer TD und sollen per mausklick verschwinden und per mausklick wieder auftauchen.

          lg
          Lefor

          1. @@Lefor:

            nuqneH

            Die Bilder sind halt in einer TD und sollen per mausklick verschwinden

            Das hast du inzwischen hinbekommen?

            und per mausklick wieder auftauchen.

            Worauf soll man denn clicken?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. @@Lefor:

              nuqneH

              Die Bilder sind halt in einer TD und sollen per mausklick verschwinden

              Das hast du inzwischen hinbekommen?

              Nein, bin genauso am anfang wie vorher.

              und per mausklick wieder auftauchen.

              Worauf soll man denn clicken?

              geht es nicht das wenn das bild weg ist man einfach auf der selben stelle nochmal klickt und es wieder da ist?

              Qapla'

              1. @@Lefor:

                nuqneH

                Nein, bin genauso am anfang wie vorher.

                Und warum? Dass eine Klammer fehlt, hatte ich (wenn schon nicht die Fehlerkonsole) dir gesagt. Dass das, was du beim Eintreten des Events ausgeführt werden soll, innerhalb von { } stehen muss, auch.

                geht es nicht das wenn das bild weg ist man einfach auf der selben stelle nochmal klickt und es wieder da ist?

                Kommt drauf an, wie groß „dieselbe Stelle“ noch ist, wenn das Bild weg ist.

                (Bei einer Tabellenzelle wird die Breite natürlich noch von den anderen Zellen in der Spalte und die Höhe noch von anderen Zellen in der Zeile bestimmt.)

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. $("td").click( function() {
                  $(this).find("img").toggleClass("hideimage");
                  }
                  )

                  so?

                  1. @@Lefor:

                    nuqneH

                    $("td").click( function() {
                    $(this).find("img").toggleClass("hideimage");
                    }
                    )

                    so?

                    Sieht doch schon besser aus. Hinter der letzten ) sollte aber noch ein ; stehen.

                    Ungünstig ist, dass bei jedem Click auf ein (lies: jedes) td-Element darin nach img-Elementen gesucht wird.

                    Abhilfe: Nicht dem img, sondern dem td ($(this)) eine Klasse à la "hide-image-inside" geben bzw. wegnehmen. Im Stylesheet steht dann:
                    .hide-image-inside img { display: none }

                    Qapla'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                    1. @@Lefor:

                      nuqneH

                      $("td").click( function() {
                      $(this).find("img").toggleClass("hideimage");
                      }
                      )

                      so?

                      Sieht doch schon besser aus. Hinter der letzten ) sollte aber noch ein ; stehen.

                      das ;ist bereits drinne. leider lassen sich die bilder noch nicht ein aus blenden

                      Ungünstig ist, dass bei jedem Click auf ein (lies: jedes) td-Element darin nach img-Elementen gesucht wird.

                      Abhilfe: Nicht dem img, sondern dem td ($(this)) eine Klasse à la "hide-image-inside" geben bzw. wegnehmen. Im Stylesheet steht dann:
                      .hide-image-inside img { display: none }

                      ja das wäre eine schönere lösung

                      Qapla'

                      1. @@Lefor:

                        nuqneH

                        leider lassen sich die bilder noch nicht ein aus blenden

                        Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

                        Qapla'

                        --
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        1. @@Lefor:

                          nuqneH

                          leider lassen sich die bilder noch nicht ein aus blenden

                          Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

                          wieso klappt es dann bei mir nicht ?

                          Qapla'

                          1. @@Lefor:

                            nuqneH

                            Doch, genau mit dem von dir gezeigten Code lassen sie sich ein-/ausblenden.

                            wieso klappt es dann bei mir nicht ?

                            Woher sollen wir das wissen? Wenn es nicht an dem von dir gezeigten Code liegt, dann wohl an dem nicht gezeigten.

                            Was sagt die Fehlerkonsole?

                            Qapla'

                            --
                            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                            1. So,

                              der Code schaut jetzt so aus:

                               $(document).ready(function(){  
                              

                              $("td").click(function(){
                              $(this).find("img").toggleClass(".hideimage");
                              });
                              });

                              Konsole sagt mir jetzt auch nicht mehr viel ... aber funktionieren tut es klar nicht ;)

                              1. @@lefor:

                                nuqneH

                                der Code schaut jetzt so aus:

                                $(document).ready(function(){
                                         $("td").click(function(){
                                $(this).find("img").toggleClass(".hideimage");
                                });
                                });

                                Konsole sagt mir jetzt auch nicht mehr viel

                                Stimmt, kein JavaScript-Fehler. (Wolltest du nicht doch dem jeweiligen td-Element eine Klasse geben/wegnehmen?)

                                ... aber funktionieren tut es klar nicht ;)

                                Vermutlich, weil du eine Klasse ".hideimage" vergibst, per Stylesheet aber Elemente der Klasse "hideimage" versteckst.

                                Qapla'

                                --
                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                1. Na ja die Bilder sind aktuell in einem TD und sollen per mausklick verschwinden.

                                  Dann muss ich doch im JS teil die .hideimage klasse verwenden oder?

                                  lg
                                  Lefor

                                  1. @@Lefor:

                                    nuqneH

                                    Na ja die Bilder sind aktuell in einem TD und sollen per mausklick verschwinden.

                                    Dann muss ich doch im JS teil die .hideimage klasse verwenden oder?

                                    Der (CSS-)Selektor '.hideimage' selektiert Elemente der Klasse "hideimage".

                                    Elemente der Klasse ".hideimage" könnte man mit dem Selektor '.\.hideimage' selektieren. Aber derartige Klassennamen will man eher nicht.

                                    Qapla'

                                    --
                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. @@Gunnar Bittersmann:

      nuqneH

      Es gibt keineCSS-Klassen

      Oh, wait. ;-)

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)