Javascript "onClick" in Tabelle funktioniert nicht

Dieses Thema im Forum "Webdesign" wurde erstellt von jpfote, 12. September 2010.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. jpfote

    jpfote Erfahrener Benutzer

    Registriert seit:
    25. Juni 2005
    Beiträge:
    967
    Hi Leute,

    ich hänge seit 3 Stunden an einer Kleinigkeit fest und komme einfach nicht weiter. Ich habe zwar bei der Glaskugel einige Treffer gefunden, aber geholfen hat leider nichts :-(.

    Ich habe eine Tabelle mit einem Optionsschalter. Wenn man "ja" anklickt, soll eine weitere Zeile in der Tabelle angezeigt werden, wenn man "nein" anklickt, soll die Zusatzzeile nicht angezeigt werden.

    Ich habe dies mit einem Javascript realisiert, welches auserhalb der Tabelle (also nach dem "</table>") auch einwandfrei funktioniert. Wenn ich den DIV-Bereich jedoch an die richtige Stelle in der Tabelle lege, funktioniert es nicht mehr.

    Sieht evtl. irgendjemand den Fehler und könnte mir einen kurzen Denkanstoß geben? Hier auch mal der HTML-Code in vereinfachter Form, aber den selben Funktionen.

    Vielen Dank schonmal!

    Grüße Jens

    Code:

    Code:
    <head>
    
    <script type="text/javascript">
        function zeile_anzeigen() {
                  document.getElementById('zeile').style.display = 'block';
        }
        
        function zeile_verbergen() {
                  document.getElementById('zeile').style.display = 'none';
        }
    </script>
    
    
    <meta ************"Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    </head>
    
    <body>
    <table width="374" border="1">
      <tr>
        <td width="128">zeile 2 anzeigen</td>
        <td width="230"><p>
          <label>
            <input type="radio" name="RadioGroup1" value="wert_ja" id="RadioGroup1_0" onclick="zeile_anzeigen()"/>
            ja</label>
          <br />
          <label>
            <input type="radio" name="RadioGroup1" value="wert_nein" id="RadioGroup1_1" onclick="zeile_verbergen()"/>
            nein</label>
          <br />
        </p></td>
      </tr>
    <div id="zeile">
      <tr>
        <td>schaltbare</td>
        <td>zeile</td>
      </tr>
    </div>
      <tr>
        <td>immer vorhandene</td>
        <td>zeile</td>
      </tr>
    </table>
    
    </body>
    </html>
    
     
  2. antondollmaier

    antondollmaier Eingetragener Provider

    Registriert seit:
    19. April 2004
    Beiträge:
    902
    Firmenname:
    ADIT Systems
    Anbieterprofil:
    Klick
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Versuch mal:

    - dem <tr> eine ID geben, KEIN div-Block
    - diese ID über visibility ein/ausblenden


    Außerdem kann ich JQuery empfehlen, welches gerade für das Ein/Ausblenden auch schön Effekte hat :)
     
  3. jpfote

    jpfote Erfahrener Benutzer

    Registriert seit:
    25. Juni 2005
    Beiträge:
    967
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Hi Anton, danke für den Tipp. Ich konnte ihn etwas abgeändert anwenden ;). Ich habe dem <tr> eine ID gegeben und lasse diese jetzt über "meine" Funktion ausblenden bzw. anzeigen. Die "visible"-Funktion hat leider den unschönen Nebeneffekt, dass die Spalte einfach nur ausgeblendet wird und somit eine Lücke in der Tabelle entsteht. Bei meiner Variante fügt sich die Tabelle immer optisch ansprechend zusammen ;).

    Grüße Jens
     
  4. antondollmaier

    antondollmaier Eingetragener Provider

    Registriert seit:
    19. April 2004
    Beiträge:
    902
    Firmenname:
    ADIT Systems
    Anbieterprofil:
    Klick
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Perfekt :)

    Ok, bin mir bei beiden nie 100%ig sicher, welches welchen Effekt hat ;-)


    jQuery erledigt da ja vieles für einen, insofern schon ne Vereinfachung. Von den optischen Effekten her mal ganz abgesehen - schaut halt besser aus, wenn die Zeile nach unten "fährt" anstatt plötzlich vorhanden zu sein.
     
  5. jpfote

    jpfote Erfahrener Benutzer

    Registriert seit:
    25. Juni 2005
    Beiträge:
    967
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Ich muss den Fred leider doch nochmal ausbuddeln. Das ein- und ausblenden funktioniert einwandfrei. Als ich die Funktion dann im Design eingefügt habe, stellte ich jedoch fest, dass die eingeblendete Zeile immer nach Links verschoben ist, als wenn es irgendeine Standardformatvorlage annehmen würde oder so. Ich habe der Zeile jetzt schonmal extra die Formatierungsdaten mitgegeben aber sie werden einfach ignoriert.

    Hast Du da evtl. auch noch einen Tipp für? Gott wie ich Java hasse... *lach*

    Grüße Jens
     
  6. cyberfreddy

    cyberfreddy Erfahrener Benutzer

    Registriert seit:
    7. Februar 2001
    Beiträge:
    590
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Poste doch wenigstens mal einen Link mit dem aktuellen Stand, dann kann man Dir auch besser bei der Fehlersuche helfen....
     
  7. jpfote

    jpfote Erfahrener Benutzer

    Registriert seit:
    25. Juni 2005
    Beiträge:
    967
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Hab ich doch glatt vergessen, sorry! Hier wieder der Code. Wie man sieht. verschiebt sich die 2. Zeile massiv. Es sieht so aus, als ob sie linksbündig angeordnet wird und die Spalten bzw. Formateigenschaften nicht angewendet werden. Im Internet Explorer wird es aber korrekt dargestellt....

    Vielen Dank auf jeden Fall schonmal falls eine(r) eine Idee hat!

    Grüße Jens

    Code:
    <head>
    
    <script type="text/javascript">
        function zeile_anzeigen() {
                  document.getElementById('zeile_mail_addy').style.display = 'block';
        }
        
        function zeile_verbergen() {
                  document.getElementById('zeile_mail_addy').style.display = 'none';
        }
    </script>
    
    
    <meta ************"Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    </head>
    
    <body>
                      <form id="form1" name="form1" method="post" action="konf_ftp.php">
                        <table width="400" border="0" align="center">
                        <tr>
                          <td width="18%" align="right">auswahl </td>
                          <td width="82%">
                            <input type="radio" name="RadioGroup1" value="mail_nein" id="RadioGroup1_1" onclick="zeile_anzeigen()"/>
                              ja<br />
                              <input name="RadioGroup1" type="radio" id="RadioGroup1_0" onclick="zeile_verbergen()" value="mail_ja" checked="checked"/>
                              nein</td>
                        </tr>
                        <tr id="zeile_mail_addy">
                          <td align="right">2. zeile</td>
                          <td><label for="mailaddy"></label>
                            schaltbar</td>
                        </tr>
                        <tr>
                          <td align="right">3. zeile:</td>
                          <td>ständig vorhanden</td>
                          </tr>
                        <tr>
                          <td colspan="2" align="right"></td>
                        </tr>
                          </table>
                      </form>
    
    </body>
    </html>
     
  8. cyberfreddy

    cyberfreddy Erfahrener Benutzer

    Registriert seit:
    7. Februar 2001
    Beiträge:
    590
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Hallo Jens,

    für ein <tr> ist offensichtlich 'block' nicht geeignet für display. Nimm doch mal 'table-row' dann passt es.
    Ich weiß aber nicht, ob das alle alten Browser unterstützen. Ich würde einfach dieses table-design über Bord werfen.

    Herzliche Grüße
    Nils
     
  9. jpfote

    jpfote Erfahrener Benutzer

    Registriert seit:
    25. Juni 2005
    Beiträge:
    967
    AW: Javascript "onClick" in Tabelle funktioniert nicht

    Hey Nils,

    vielen Dank für den Tipp! Mit "table-row" funktioniert es einwandfrei! Mit dem tabellenlosen Design hast Du natürlich Recht, allerdings stehen im Moment soviele Dinge an... mit CSS muss ich mich mal in Ruhe auseinandersetzen, das ist ein Punkt für die nächsten Versionen denke ich.

    Viele Grüße Jens
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen