Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 24
  1. #1
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    Mit Javascript mehrere Block-Elemente ausblenden ?

    Hi, ich habe ein ziemliches Problem.

    Und zwaaaaar... ich bastele gerade an einer PHP-Seite mit MySQL-Anteil drin.
    Es ist so, das ich innerhalb dieser PHP-Seite 2 Tabellen darstelle.
    Und zwar habe ich in meiner DB Tabelle A und B und vergleiche A mit B, sowie B mit A.
    Beide Ergebnisse sind unterschiedlich.
    Diese beiden Ergebnisse stelle ich zeilenweise da.
    Das sieht schematisch wie folgt aus:

    +-------------+--------------+--------------+--------------+
    |Data1(Tab1)|Data2(Tab1)|Data1(Tab2)|Data2(Tab2)|
    +-------------+--------------+--------------+--------------+

    Ich erzeuge also jeweils 2 Datenfelder, pro Ergebniss aus den Vergleichen.
    Erst nach diesen 4 Feldern setzte ich ein "</tr>"
    Nun ist es allerdings so, das ich nach Data2(Tab1) und Data2(Tab2) noch ein weiteres, optional einzublendendes Feld gebrauchen könnte.
    Ich habe dazu schon eine JavaScript-Funktion gefunden, die ich als vorlage genutzt habe.
    Jedoch stellt sich mir jetzt ein großes Problem: "<div>"-Elemente scheinen nicht über eine Tabellenzeile hinaus zu funktionieren und das Java Script kann immer nur ein einziges solches Element bedienen.
    D.h. alles was die beiden Knöpfe, die ich jeweils eingefügt habe, tun ist die beiden optionalen Tableheader ein- und auszublenden.
    Alle zeilen darunter sind schon von vorne herein sichtbar und lassen sich auch nicht ausblenden.
    Ich habe mal eine testseite gebaut und etwas rumprobiert.
    Da habe ich eben festgestellt, dass das Script nicht über eine Tabellenzeile hinaus funktioniert.

    Ich werde vorraussichtlich auch noch große Probleme mit dem Colspan bekommen, da ich ja optional plötzlich 2 komplette Datenreihen dazupacken kann.. das gibt ein formatierungstechnischen Chaos, aber das muss ich dann später sehen, wie ich das löse.

    Ich hoffe es wurde einigermaßen klar, was ich machen möchte und wo das Problem liegt.
    Ich habe eine dynamische Anzahl an zeilen, in deren Mitte und deren Ende ich jeweils ein Datenfeld hinzupacken möchte, mit der Möglichkeit diese auch wieder auszublenden.

    Bis vorhin hatte ich nie was mit JavaScript zu tun und war froh, mit PHP ein bischen basteln zu können.
    Von daher hab ich echt keinen Ansatzpunkt zu einer Lösung.

    Hilfe ?! ^^
    Geändert von Lagerhaus_Jonny (16-06-2008 um 12:51 Uhr)

  2. #2
    Luz
    Luz ist offline Haudegen
    registriert
    27-09-2003
    Beiträge
    698

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Zitat Zitat von Lagerhaus_Jonny Beitrag anzeigen
    Ich habe dazu schon eine JavaScript-Funktion gefunden, die ich als vorlage genutzt habe.
    Nun ja, diese Funktion wäre für uns nützlich.

    Ansonsten:
    <div>"-Elemente scheinen nicht über eine Tabellenzeile hinaus zu funktionieren
    Versuchs mal mit css (z-Index und "position:absolute;")

    und das Java Script kann immer nur ein einziges solches Element bedienen.
    Mit Sicherheit lässt sich sagen, dass Javascript mehrere Elemente bedienen kann. (document.getElementsByName() oder document.getElementsByTagName() helfen Dir allenfalls weiter).
    Allerdings lässt sich natürlich jeweils nur ein Element anklicken.

    Ein Link zu Deiner Seite, das von Dir verwendete Script und eine prägnantere Problembeschreibung deinerseits dürften helfen, weniger wild draufloszuraten.

  3. #3
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Also von dem was du da geschrieben hast, verstehe ich nur Bahnhof.
    Was dieses "document.getElementsByName()" macht und wie ich es überhaupt benutze, weiß ich nicht im geringsten.
    Sorry.
    Was JavaScript angeht kann ich nur Copy&Paste.
    Bis vorhin habe ich nichtmal JavaScript gesehen... 0 Berührungspunkte.
    Ich packe mal relevante Ausschnitte der Seite hier rein, vielleicht hilft das erstmal weiter, für den Überblick.

    Code:
    <head><title>Tabellen Vergleichen</title></head>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_changeProp(objName,x,theProp,theValue) { //v6.0
      var obj = MM_findObj(objName);
      if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
        if (theValue == true || theValue == false)
          eval("obj."+theProp+"="+theValue);
        else eval("obj."+theProp+"='"+theValue+"'");
      }
    }
    //-->
    </script>
    </head>
    Das sind die beiden Funktionen, die ich verwende

    Code:
    echo "<tr>"."\n";
    if($exceptionflag == "true")
    	{
    	echo "<td align='right'><input type='button' value='>>>' onClick='MM_changeProp(\"contact\",\"\",\"style.display\",\"block\",\"DIV\")' ondblClick='MM_changeProp(\"contact\",\"\",\"style.display\",\"none\",\"DIV\")'></td>
    	<td align='right'><input type='button' value='>>>' onClick='MM_changeProp(\"contact2\",\"\",\"style.display\",\"block\",\"DIV\")' ondblClick='MM_changeProp(\"contact2\",\"\",\"style.display\",\"none\",\"DIV\")'>"."\n";
    	}
    else
    	{
    	echo "<td colspan='$colspan2' align='right'><input type='button' value='>>>' onClick='MM_changeProp(\"contact\",\"\",\"style.display\",\"block\",\"DIV\")' ondblClick='MM_changeProp(\"contact\",\"\",\"style.display\",\"none\",\"DIV\")'></td>
    	<td colspan='$colspan2' align='right'><input type='button' value='>>>' onClick='MM_changeProp(\"contact2\",\"\",\"style.display\",\"block\",\"DIV\")' ondblClick='MM_changeProp(\"contact2\",\"\",\"style.display\",\"none\",\"DIV\")'>"."\n";
    	}
    echo "</tr>"."\n";
    Auf diese Weise habe ich die Funktion eingebuden. In 2 Buttons die auf Klick einblenden und auf doppelklick ausblenden.

    Code:
    if($exceptionflag != "true")
    	{
    	echo "<tr><td align='center' width='25%'><b><font face='arial'>Nodename</font></b></td>"."\n";
    	echo "<td align='center' width='25%'><b><font face='arial'>IP</font></b></td>"."\n";
    	echo "<td><div id='contact'><font face='Arial' size='-1'>Contact</font></td></div>"."\n";
    	echo "<td align='center' width='25%'><b><font face='arial'>Nodename</font></b></td>"."\n";
    	echo "<td align='center' width='25%'><b><font face='arial'>IP</font></b></td>"."\n";
    	echo "<td><div id='contact2'><font face='Arial' size='-1'>Contact</font></td></tr></div>"."\n";
    	}
    else
    	{
    	echo "<tr><td align='center' width='50%'><b><font face='arial'>Nodename</font></b></td>"."\n";
    	echo "<td><div id='contact'><font face='Arial' size='-1'>Contact</font></td></div>"."\n";
    	echo "<td align='center' width='50%'><b><font face='arial'>Nodename</font></b></td>"."\n";
    	echo "<td><div id='contact2'><font face='Arial' size='-1'>Contact</font></td></tr></div>"."\n";
    	}
    Und das sind die beiden zusätzlichen Tableheader, dessen ein- und ausblenden ja bereits funktioniert.

    Code:
    if($exeptionflag != "true")
    			{
    			echo "<td align='center'><font face='Arial'>$tmp_name</font></td>"."\n";
    			echo "<td align='center'><font face='Arial'>$tmp_ip</font></td>"."\n";
    			echo "<td><div id='contact'><font face='Arial'>$ext_contact</font></td></div>"."\n";
    			}
    		else
    			{
    			echo "<td align='center'><font face='Arial'>$tmp_name</font></td>"."\n";
    			echo "<td><div id='contact'><font face='Arial'>$ext_contact</font></td></div>"."\n";
    			}
    Das ist ein Teil der ersten While-Schleife, die die Ausgabe der einzelnen Zeilen realisiert

    Ich habe zwei ineinander verschachtelte WHILE-Schleifen, womit ich dann zeilenweise beide Tabellen direkt hintereinander aufbaue.
    In der ersten WHILE-Schleife wollte ich die erste Id "contact" bedienen und in der zweiten eben die Id "contact2"... das klappt aber eben nicht.
    Bis auf das Ausblenden der Tableheader passiert gar nichts.
    Im Quelltext der Seite steht aber alles eigentlich richtig.

    Wie gesagt, ich bin da kompletter Leie.
    Ich habe mir diese MM_changeProb-Funktion mal angeguckt, was die Angaben in der Klammer überhaupt bedeuten und die Referenz mal testhalber weg vom <DIV> hin zu <td> gesetzt.
    Das funktionierte zwar ebenfalls, ändert aber nichts daran, das wieder nur das erste Element aus- eingeblendet wird, nicht aber alle nachfolgenden.
    Da müsste irgendwie ne Schleife rein oder so... aber kein Plan wie das funktionieren soll...

    Die Seite kann ich übrigens nicht linken, weil sie sich in einem Firmennetzwerk befindet.
    Aber den Quellcode kann ich reinstellen, im Anhang.
    Angehängte Dateien Angehängte Dateien
    Geändert von Lagerhaus_Jonny (16-06-2008 um 13:40 Uhr)

  4. #4
    cybaer ist offline Kaiser
    registriert
    12-09-2006
    Beiträge
    1.338

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Zitat Zitat von Lagerhaus_Jonny Beitrag anzeigen
    Ich hoffe es wurde einigermaßen klar, was ich machen möchte und wo das Problem liegt.
    Grob.

    Wenn es sich nur um "zusätzliche Zelle: an/aus" handelt, dann weise diese TDs einer Klasse zu, und im CSS setze diese Klasse via display wahlweise auf eingeblendet (Default) oder ausgeblendet ("none").

    Mit einem Nachfahren-Selektor a la .StandardKlasseDerTabelle .KlasseDerTDs bzw. .AusgeblendetKlasseDerTabelle .KlasseDerTDs kannst Du dann zw. beiden Zuständen mit className wechseln, indem der Name der TABLE-Klasse gewechselt wird.

    Wenn es mehr Alternativen/Kombinationen gibt, als die bislang erkennbaren 2, dann kann man z.B. bessere JS-Funktionen zum Ausblenden verwenden.
    Gruß, Cybaer

  5. #5
    cybaer ist offline Kaiser
    registriert
    12-09-2006
    Beiträge
    1.338

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Zitat Zitat von Lagerhaus_Jonny Beitrag anzeigen
    Also von dem was du da geschrieben hast, verstehe ich nur Bahnhof.
    Was dieses "document.getElementsByName()" macht und wie ich es überhaupt benutze, weiß ich nicht im geringsten.
    Hier (und in anderen Foren) wird i.d.R. Hilfe zur Selbsthilfe geleistet. Aufträge werden aber ggf. gerne (gegen Rechnungsstellung) entgegengenommen.

    Ich habe mir diese MM_changeProb-Funktion mal angeguckt, was die Angaben in der Klammer überhaupt bedeuten
    Dreamweaver-JS-Codes sind ja soooo übel ...
    Gruß, Cybaer

  6. #6
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Äh.... was ? oO

    Ich nix verstehn oO

    Was sind Klassen ?
    Wie mach ich die ?
    CSS ? das einzige was ich mit Stylesheets gemacht habe, war nen Hintergrundbild für Tablerows einzufügen ^^

    Also ehrlich... ich hab so ne ungefähre Ahnung wie du dir das vorstellst, aber das wars dann auch.
    Mehr kriege ich aus der Glaskugel nicht raus.

    Aber ich weiß ja, Leute mit 0 Ahnung sind immer verhasst.
    Dachte jemand hätte da was passendes parat, weil so eine Frage sicher schon 7 millionen mal gestellt wurde..

    Mit einem Nachfahren-Selektor a la .StandardKlasseDerTabelle .KlasseDerTDs bzw. .AusgeblendetKlasseDerTabelle .KlasseDerTDs kannst Du dann zw. beiden Zuständen mit className wechseln, indem der Name der TABLE-Klasse gewechselt wird.
    Ja äh... das äh... so hätte ich das auch gemacht, wenn ich du wäre. oO *wegrenn*

    @cybaer
    Denke doch das man
    Code:
    MM_changeProp(objName,x,theProp,theValue)
    verstehen kann ^^
    Ich wollte ja nur wissen, was das für Angaben in den Klammern sind.

    Tja, hm...keine Ahnung wie ich das jetzt noch hinkriegen soll.
    Denke werde mir diese Knöpfe dann halt klemmen und die beiden Felder von vorne herein anzeigen lassen, auf ganz normalem Wege.
    Anders kriege ich das nicht hin.

    Trotzdem dankö
    Geändert von Lagerhaus_Jonny (16-06-2008 um 13:58 Uhr)

  7. #7
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Ehrlich, für mich klingt das so, als ob du dich besser auf das konzentrierst was du kannst oder noch besser du versuchst dir die Grundlagen anzueignen.

  8. #8
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Wenn ich ehrlich bin, hab ich auch keine große Muse mir jetzt noch die kompletten Grundlagen zu JavaScript reinzuziehen, damit ich ne Ahnung habe wovon hier geredet wird.

    Die Sache ist nur, das ich die Messlatte meiner Arbeit immer selbst ziemlich hoch ansetze.
    Und dieses komfortable Schmankerl mit den Knöpfen fand ich sehr passend.
    Aber der Aufwand scheint wohl zu groß zu sein, zumindest für mich.

    Denke mal für jemanden der sich auskennt keine große Sache aber für mich lohnt das einfach nicht, weil ich JavaScript sonst einfach nicht brauche.

  9. #9
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Ich hab den Thread nicht komplett gelesen, aber wenn ich das richtig sehe ging es zuletzt auch um CSS. Ich weiß ja nicht was du machst, aber JS und CSS sollte man in den Grundlagen beherrschen wenn man Internetseiten macht, aber das ist nur meine bescheidene Meinung.

  10. #10
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Ich mache keine Internetseiten sondern sowas wie ein einfaches
    PHP-basiertes Verwaltungstool hier auf der Arbeit.

  11. #11
    cybaer ist offline Kaiser
    registriert
    12-09-2006
    Beiträge
    1.338

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Zitat Zitat von Lagerhaus_Jonny Beitrag anzeigen
    Was sind Klassen ?
    Wie mach ich die ?
    HTML-Attribut CLASS.

    CSS ? das einzige was ich mit Stylesheets gemacht habe, war nen Hintergrundbild für Tablerows einzufügen ^^
    Mit CSS steuert man die Optik (ggf. dynamisch mithilfe von JS).

    Du hast ein Problem der Optik - das ist CSS. JS ist hier nur der Mittler.

    Also ehrlich... ich hab so ne ungefähre Ahnung wie du dir das vorstellst, aber das wars dann auch.
    Mehr kriege ich aus der Glaskugel nicht raus.
    Man kann suchen. Nach getElementsByTagName() oder Nachfahren-Selektor oder ...
    ... und lernen.

    Dachte jemand hätte da was passendes parat, weil so eine Frage sicher schon 7 millionen mal gestellt wurde..
    Konkret hat dein Problem sicher niemand gehabt.

    Denke doch das man
    Code:
    MM_changeProp(objName,x,theProp,theValue)
    verstehen kann
    Sicher. Nur der DW-Code ist halt nicht nur nicht kommentiert, sondern prinzipiell auch von übler Qualität (also kein JS-Experte bei Verstand, wurde so etwas verbrechen). Zwei Gründe, warum es schwer ist, sich da was abzuschauen ...
    Gruß, Cybaer

  12. #12
    Luz
    Luz ist offline Haudegen
    registriert
    27-09-2003
    Beiträge
    698

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Könntest Du mal den erzeugten Quelltext posten (also das, was nach der php-Verarbeitung im Browser ankommt?). Am besten nicht alles, sondern ein funktionierender Bruchteil mit 5-6 Tabellenzeilen, der zeigt, was Dein momentaner Stand ist. Am besten mit einer Beschreibung, was das ganze schlussendlich tun sollte ( ich verstehe ebenfalls Bahnhof).
    Ansonsten hat selfHTML eine recht brauchbare Javascript Referenz (die u.a. auch Auskunft über document.getElementById etc. gibt).

    Wenn Du php beherrschst (was Du anscheinend tust) dann solltest Du das schliesslich hinkriegen - auch js arbeitet wie jede andere Sprache mit Schleifen und Abfragen. Allerdings ist ein Verständnis von css schon recht nützlich. Dieses ist allerdings (in den Grundzügen) nicht besonders schwierig zu erlernen.

  13. #13
    Lagerhaus_Jonny ist offline Jungspund
    registriert
    16-06-2008
    Beiträge
    17

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    HTML-Attribut CLASS.
    Hm, dass sich das auf HTML bezog wusste ich nicht.
    Ich hab nach "javascript klassen erstellen" gegoogled.
    Aber beim lesen der Texte da wurds ziemlich dunkel um mich herum ^^
    Ich hab in HTML/PHP noch nie was mit Klassen gemacht... muss ich mal genauer angucken.
    Das war schonmal ein wichtiger Hinweis.

    Du hast ein Problem der Optik - das ist CSS. JS ist hier nur der Mittler.
    Okay, verstanden.

    Hab mal n bischen was über "getElementsByTagName()" gelesen und auch verstanden.
    Wie ich das jetzt explizit anwende ist nicht 100% klar, aber das ist try & error.
    Mal sehen was ich daraus machen kann.
    Dieser Nachfahren-Selektor ist interessant, nur frage ich mich, wieso das auf einmal elementübergreifend funktioniert, das was ich versucht hatte jedoch nicht.

    Jetzt hab ich aber schon ein Problem.
    Ich kann mir zwar vorstellen, über einen selektor alle gewünschen Elemente mit der Funktion MM_changeprop zu versehen (ob das geht weiß ich nicht, ich mutmaße nur), aber wie verbinde ich das ganze dann mit dem Knopf ?

    @Luz
    Ja, klar... kein Problem.
    Hier:

    Code:
    <head><title>Tabellen Vergleichen</title></head>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_changeProp(objName,x,theProp,theValue) { //v6.0
      var obj = MM_findObj(objName);
      if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
        if (theValue == true || theValue == false)
          eval("obj."+theProp+"="+theValue);
        else eval("obj."+theProp+"='"+theValue+"'");
      }
    }
    //-->
    </script>
    </head>
    <form action='vergleich.php' method='POST'>
    <table align='center' border='0' width='40%' bgcolor='FFFFE5'><tr>
    <td align='center' colspan='3'><font face='Arial' size='+1'>Tabellen-Vergleiche:</font></td></tr>
    <tr><td colspan='3'>&nbsp;</td></tr><tr><td align='center' style='background-image:url(line_60.jpg)'>
    <font face='Arial'>Referenz-Tabelle vergleichen mit</font>
    </td>
    <td align='center' style='background-image:url(line_60.jpg)'><select name='table'>
    <option>bfs_imp</option>
    <option>cw_imp</option>
    <option>opnet_imp</option>
    <option>qpm_imp</option>
    <option>smarts_imp</option>
    </select></td></tr>
    <tr><td colspan='3'>&nbsp;</td></tr>
    <tr><td align='center' width='50%'><input type='submit' value='vergleichen'></form></td><form action='start.php' method='link'><td align='center'><input type='submit' value='zur&uuml;ck'></form></td></tr>
    </table>
    <table align='center' border='1' width='70%' bgcolor='FFFFE5' cellpadding='2%'><tr>
    <td align='center' width='50%'><font face='Arial'>Tabelle 1</font></td>
    <td align='center' width='50%'><font face='Arial'>Tabelle 2</font></td>
    </tr><tr>
    <td align='right'><input type='button' value='>>>' onClick='MM_changeProp("contact","","style.display","block","DIV")' ondblClick='MM_changeProp("contact","","style.display","none","DIV")'></td><td align='right'><input type='button' value='>>>' onClick='MM_changeProp("contact2","","style.display","block","DIV")' ondblClick='MM_changeProp("contact2","","style.display","none","DIV")'>
    </tr>
    <tr><td align='center' width='50%'><b><font face='arial'>Nodename</font></b></td>
    <td><div id='contact'><font face='Arial' size='-1'>Contact</font></td></div>
    <td align='center' width='50%'><b><font face='arial'>Nodename</font></b></td>
    <td><div id='contact2'><font face='Arial' size='-1'>Contact</font></td></tr></div>
    <tr><td align='center'><font face='Arial'>data1(tab1)</font></td>
    <td><div id='contact'><font face='Arial'>optional</font></td></div>
    <td align='center'><font face='Arial'>data1(tab2)</font></td>
    <td><div id='contact2'><font face='Arial'>optional</font></td></tr></div>
    <tr><td align='center'><font face='Arial'>data1(tab1)</font></td>
    <td><div id='contact'><font face='Arial'>optional</font></td></div>
    <td align='center'><font face='Arial'>data1(tab2)</font></td>
    <td><div id='contact2'><font face='Arial'>optional</font></td></tr></div>
    Das ist der komplette Kopf + 2 Zeilen.
    Zu beachten gilt es das es hier nur die beiden Felder Data1 von jeweils Tabelle 1 und Tabelle 2 gibt, das Feld Data2 entfiel bei diesem Vergleich.
    Wie man da sehen kann steht alles schön in einem Element mit den IDs "contact" und "contact2".
    Doch lediglich die Header, im Quellcode als <td><div id='contact'><font face='Arial' size='-1'>Contact</font></td></div> zu sehen blenden sich aus und ein, wie gesagt.
    Die Felder um die es hier geht habe ich mit dem Wort "optional" gekennzeichnet.
    Genau diese Felder soll man onClick ein- und wieder ausblenden können, wie durch den Button definiert:
    <input type='button' value='>>>' onClick='MM_changeProp("contact","","style.display","block","DIV")' ondblClick='MM_changeProp("contact","","style.display","none","DIV")'>
    Geändert von Lagerhaus_Jonny (16-06-2008 um 15:19 Uhr)

  14. #14
    Luz
    Luz ist offline Haudegen
    registriert
    27-09-2003
    Beiträge
    698

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Es gibt da noch etwas, das Du wissen solltest:
    Eine Id darf pro Dokument nur einmal vorkommen. (Deshalb heisst der Aufruf auch getElementById). Du hast jedoch mehrere Ids vergeben, logischerweise wurde immer nur die erste berücksichtigt.

    Ein weiteres Problem lag in Deinem Versuch, das DIV über die Tabellenzelle auszuweiten (dieses anfängliche Problem habe ich erst jetzt verstanden): Sowas funktioniert nicht. Dies ist allerdings rein HTML bedingt (Auf table folgt tr, nach tr td, weitere Elemente lassen sich nicht dazwischenschachteln.)

    Hier mal ein Skelett, auf dem Du aufbauen kannst (ich habe Deinen Code entschlankt - ich denke jedoch, Du kannst die Funktionsweise trotzdem nachvollziehen):
    Beim Klick auf den Button werden zunächst alle <td> durchlaufen. Enthalten diese eine bestimmte css-Klasse werden sie auf sichtbar/unsichtbar geschaltet. Ich denke, als Idee, wie sowas funtkioniert, sollte das reichen.
    (Du wirst auch feststellen, dass sich das ganze einiges leserlicher als im Dreamweaver-Code gestaltet).
    Im onclick-Handler (resp. onDblClick) kannst Du dann die entsprechenden Klassennamen übergeben:
    onclick= showFields("contact2")
    zeigt entsprechend alle td's mit der css-Klasse "contact2" an, hideFields("contact2") versteckt sie.


    PHP-Code:
    <html>
    <
    head><title>Tabellen Vergleichen</title>

    <
    script type="text/JavaScript">

    function 
    showFields(className) {
       var 
    tds document.getElementsByTagName("td"); // Alle Zellen holen.
       
    for (var i=0;i<tds.length;i++) {
          if ( 
    tds[i].className==className ) { // Auf Klassennamen prüfen.
               
    tds[i].style.display="block";
          }
       }


    function 
    hideFields(className) {

     var 
    tds document.getElementsByTagName("td");
       for (var 
    i=0;i<tds.length;i++) {
          if ( 
    tds[i].className==className ) {
               
    tds[i].style.display="none";
          }
       }



    </script>

    <style>
    .contact {
         border:1px solid red;

    .contact2 {
        border: 1px solid blue;
    }
    </style>
    </head>
    <body>
    <table align='center' border='1' width='70%' bgcolor='FFFFE5' cellpadding='2%'><tr>
    <td align='center' width='50%'>Tabelle 1</td>
    <td align='center' width='50%'><font face='Arial'>Tabelle 2</font></td>
    </tr><tr>
    <td align='right'><input type='button' value='>>>' onClick="showFields('contact')" onDblClick="hideFields('contact')"></td><td align='right'><input type='button' value='>>>' onClick='showFields("contact2")' ondblClick='hideFields("contact2")'>
    </tr>

    <tr>
        <td> Nodename</td>
        <td class="contact">Contact</td>
        <td>Nodename</td>
        <td class="contact2">Contact</font></td>
    </tr>

    <tr>
        <td>data1(tab1)</td>
        <td class="contact">optional</td>
        <td>data1(tab2)</td>
        <td class="contact2">optional</td>
    </tr>
        
    <tr>
        <td>data1(tab1)</td>
        <td class="contact">optional</td>
        <td>data1(tab2)</td>
        <td class="contact2">optional</td>
    </tr>
    </tr></table>
    </body>
    </html> 
    Geändert von Luz (16-06-2008 um 16:29 Uhr)

  15. #15
    cybaer ist offline Kaiser
    registriert
    12-09-2006
    Beiträge
    1.338

    AW: Mit Javascript mehrere Block-Elemente ausblenden ?

    Zitat Zitat von Lagerhaus_Jonny Beitrag anzeigen
    Ich kann mir zwar vorstellen, über einen selektor alle gewünschen Elemente mit der Funktion MM_changeprop zu versehen (ob das geht weiß ich nicht, ich mutmaße nur), aber wie verbinde ich das ganze dann mit dem Knopf ?
    Das eine hat mit dem anderen nichts zu tun. Das sind 2 versch. Lösungsansätze.

    Neben Luz' mit getElement... wäre meiner so:

    CSS:

    .toggle .optional { display:none; }

    HTML:

    <table id="toggleTable" ...>

    ...

    <td class="optional">...

    oder

    <td><div class="optional">...


    und dann:

    <button onclick="document.getElementById('toggleTable').className=(document.getElementById('toggleTable').cl assName)?'toggleTable:'';">Toggle</button>

    Es wird also immer zw. der Klasse "toggle" und keiner Klasse gewechselt, udn damit das zuständige CSS ...
    Gruß, Cybaer

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Javascript durch Link auf 2. Seite ausführen??
    Von Bass-T im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 27-06-2008, 11:35
  2. JavaScript probleme HILFE!!!
    Von Rioter im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 04-09-2006, 17:46
  3. Suche Javascript
    Von steffi71 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 07-02-2005, 09:09
  4. hilfe bei javascript
    Von frank2000 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 17-01-2005, 19:33
  5. Antworten: 2
    Letzter Beitrag: 20-12-2004, 10:47

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •