Ankündigung

Einklappen
Keine Ankündigung bisher.

Zwei Anweisungen mit onklick ausführen

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Zwei Anweisungen mit onklick ausführen

    Liebe Leser,

    bin ein absoluter Neuling in Javascript und versuche folgendes:
    Bei einem Klick auf eine Tabellenzelle soll zunächst die Seite neu geladen werden und hernach die Tabellenzelle rot hinterlegt werden.
    Habe es wie folgt versucht:

    Code:
    <html>
<head>
</head>
<body>
<table border=1>
    <tr>
	 <td onclick="window.location.reload();this.style.backgroundColor='red';">Test</td>
    </tr>
  </table>
</body>
</html>
    Funktioniert aber nicht.

    Hat jemand eine Idee wie ich das realisieren könnte?

    Vielen Dank im Voraus!

    tb2268
    Stichworte: backgroundcolor, onclick, reload
  • #2
    reload() wird einen neuen Request auslösen dh zum zweiten kommt es gar nicht. Was ist denn der Sinn dahinter das es zuerst reloaden muss? Ev. sonst mit einem Parameter arbeiten, kannst ja auch einen "normalen" Link auf die Seite selbst machen, mit zB eine GET Parameter und den dann auswerten, mit PHP oder JS, etc.. Hintergrund wäre dazu interessant.

    Kommentar

    • #3
      Hallo hausl,

      Die Tabelle bildet ein Menü ab, aus dem der Benutzer auswählen kann, welche Unterseite im darunter liegenden Frame dargestellt wird. (Der Text Test soll später ducht einen Link ersetzt werden)

      Wenn der die Tabellenzelle angeklickt wurde, soll sich die Hintergrundfarbe ändern. Wenn kein Reload erfolgt, dann wird bei einem weiteren Klick auf eine andere Tabellenzelle eine weitere Tabellenzelle rot gefärbt, wobei die vorherige Hintergrundfarbe bestehen bleibt, was ich aber nicht will.

      Es geht mir deshalb darum, wie ich zunächst die Anwahl der ersten Hintergrundfarbe rückgängig machen kann, so dass immer maximal eine rot hinterlegte Tabellenzelle vorhanden ist.

      Ich hoffe, ich konnte verständilich machen, um was es mir geht.

      Vielen Dank für Deine Bemühungen im Voraus.

      tb2268

      Kommentar

      • #4
        Warum Frames? Das macht man eigenltich nicht mehr ("Frames sind tot", ist der Tenor den ich immer wieder mitbekomme), u.a. aus diesem Grund. Frames sind auch nicht nötig, geht im Grunde auch alles ohne.

        Kommentar

        • #5
          Jeder Frame verweist auf eine eigene URL und macht daher einen neuen Strang an Requests auf. Heisst: Wenn du drei Frames hast, die gemeinsame Resourcen verwenden, werden diese dreimal neu geladen.

          Weiterer Nachteil: Informationen, die in einem Frame aktualisiert werden, müssen auch in die anderen Frames neugeladen werden, was wiederum zu oben genanntem Problem führt.

          Web 2.0 setzt auf asynchrone Requests (AJAX), nicht mehr auf Frames.

          Kommentar

          • #6
            Wie bereits ausführlich erklärt, ist Frame ne schlechte Wahl.

            Bezogen auf die Färbungsproblematik, solltest Du Dir eine kleine JS-Funktion basteln, die zunächst die Hintergrundfarbe aller TD`s zurücksetzt und dann den geklickten rot einfärbt.

            Ein Beispiel, wie es mit jQuery funktionieren könnte:
            Code:
            $( 'TD' ).click( function() {

    // alle td's auf weißen Hintergrund setzen
    $( 'TD' ).css( 'background-color', '#fff' );

    // geklicktes Element rot hinterlegen
    $( this ).css( 'background-color', '#f00' );

});
            Deine TD's benötigen dann auch kein onclick-Attribut mehr.

            Kommentar

            • #7
              Hallo Arne Drews,

              vielen Dank für die Antwort.
              Wie binde ich die Funktion in meine HTML-Seite ein, wenn nicht über onklick?

              Code:
              <html>
<head>

<script type="text/javascript">
<!--
$( 'TD' ).click( function() {

    // alle td's auf weißen Hintergrund setzen
    $( 'TD' ).css( 'background-color', '#fff' );

    // geklicktes Element rot hinterlegen
    $( this ).css( 'background-color', '#f00' );

});


//-->
</script>

</head>
<body>

<table border=1>
    <tr>
	 <td>Test1</td>
	 <td>Test2</td>
	 <td>Test3</td>
    </tr>
  </table>


</body>
</html>
              funktioniert nicht.

              Wie gesagt, ich bin absoluter Anfänger.

              Vielen Dank!

              tb2268

              Kommentar

              • #8
                Das ist jQuery. Du musst die jQuery-Bibliothek einbinden, bspw. die v1.11.1 so:
                Code:
                <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

                Kommentar

                • #9
                  Hallöchen,

                  Zitat von tb2268 Beitrag anzeigen
                  Wie gesagt, ich bin absoluter Anfänger.
                  Wenn du bereits daran scheiterst, dann solltest du dir ernsthaft Gedanken darüber machen, dir die Grundlagen anzueignen. Dafür gibt es massig Tutorials im Netz.

                  Viele Grüße,
                  lotti

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X