Mehrere Span-Elemente auf einmal ändern

Z

zeugwart

Grünschnabel
Schönen guten Tag :D,

Direkt zu meinem Problemchen ->

Ich habe einen Ordner mit X Unterordnern und Y Dateien, diese Dateien sollen alle
zum Download angeboten werden können, also php Scriptchen erstellt mit ner rekursiven
Funktion, welche alles nach und nach abklappert und in einer Tabelle darstellt.

Ergebnis:

Ordner
|
|----Unterordner
|..........|
|..........|----Datei 1(klickbar)................Nutzdaten
|..........|----Datei 2(klickbar)................Nutzdaten
|
|----UnterordnerXYZ

usw.

So schön so gut, leider sind das jetzt ganz schön viele geworden, und der Übersicht zu liebe würde ich gern das "Untergeraffel" ausblenden.

Gedacht, begonnen, also zuerst jedem "tr"-Tag das da zugewiesen:

HTML: 
<tr  style="display:block" id="<?echo $Verzeichnisname;?>">

So damit wurde auch jeder Datei im Verzeichnis eine ID gleich dem Verzeichnisnamen
zugewiesen.
Dann JS genommen um die style Eigenschaft der entsprechenden ID beim Klick auf das
jeweilige Verzeichnis zu ändern.
Funktioniert einwandfrei - BEIM ERSTEN ELEMENT :mad:
Und von ein paar seltsamen Nebenefekten mal abgesehen ^^

Um das aufs obige Beispiel zu Übertragen:
Ich klick auf Unterordner, dann wird leider nur Datei1 ausgeblendet. Wen ich wieder drauf
klicke is se wieder da :), wenn ich das noch n paar mal mach, schleicht sich ein
Zeilenumbruch ein, der auf mistriöse Weise vervielfältigt wird, aber anderes Problem ;-)

Also neuer Versuch, diesmal alles mit SPAN-Elementen "umklammert", IDs passen!
Wieder das Selbe.
Allerdings bringt es anscheinend auch nichts ein SpanElement um so ne Zelle oder Zeile
zu basteln - irgendwie doof :(

Nun die Frage:

Was könnt ihr mir raten, bzw kann mir jemand sagen, wie ich mit JavaScript
mehrere Elemente, wenn möglich in ner Tabelle verschwinden lassen kann?


MfG,
Zeugwart
 
Hi,

klar geht das. :) Zum Beispiel so:

Gib allen Elementen die du auf einmal verschwinden lassen willst den selben Namen im Name-Attribut und ruf dann eine Funktion wie diese in JS auf:

Code: 
//hideName ist der Wert des Name-Attributs
function(hideName)
{

     for(i=0; i > document.getElementsByName(hideName).length; i++){

          document.getElementsByName(hideName)[i].style.display = none;

     }

}
(nicht getestet)


Gruß

Christian
 
Hey ho,

das ging ja ratz fatz mit der Antwort :)

Da is aber immer noch mein rekursives Zuordnungsproblem ;-)
Weil ich mich gezwungenermasen immer innerhalb einer Tabelle bewege...

Hab mich jetzt entschlossen das Bäumchen in nem Array abzubilden um es gepflegt
verwalten zu können, ne schöne Übung :D - Das ist mein Weg des Ninja *gg

Mal sehn wie weit ich komm...


Bye
 
Hi,

der IE ermittelt mit der Methode getElementsByName aber nur die Elemente, die ein name-Attribut enthalten dürfen - z.B. A, IFRAME, FRAME, BUTTON.

Es gab hier schon einen Thread, in dem eine Möglichkeit vorgestellt wurde, wie der Zugriff auf mehrere Tabellenzeilen über gleiche Klassennamen ermöglicht werden kann.

Ciao
Quaese
 
Hey cool,

danke - wird mir später sicher noch nützlich sein, sobald ich fähig bin die Elemente
im Baum wieder sichtbar zu machen ^ ^
Grad siehts so aus, als ob ich n falschen Weg zurück geh ;-)

Ciao
 
Hallo,

werd jetzt mal nen Bruchteil meiner Arbeit hier als Disskusionsgrundlage reinstellen...
PHP: 
<html>
<head>

<title>Test</title>

<style type="text/css">
</style>


<script type="text/javascript">
  
  var number    = "0";
  var stopAdd   = false;
  var List      = new Array();
  
  function nextSon1(obi) {
  }
  
  
  
  function Node(id,father){    //Atention this should be an object, not a function!!
    this.first      = true;
    this.id         = id;
    this.father     = father;
    this.sons       = new Array();
    this.item       = new Array();
    this.ope        = false;
    this.nextSon    = nextSon1(this);
    this.nextItem   = this.item.length;
    this.first = false;
  }
  
  
  
  function addNode(id,father) {
    if (!stopAdd) {  
      //Create new node
      List[id] = new Node(id,father)
      //Update father
      List[father].sons[List[father].sons.length] = id;
    }
  }
  
  
  
  function addItem(nodeID,itemID){
    //Add an item to the nodes inventory 
    List[nodeID].item[List[nodeID].item.length] = itemID;  
  }
  
  
  
  function clicked(id){
    //Change the open attribute 'ope'
    if (List[id].ope == true) {
      List[id].ope = false;
    }
    else {
      //Enable to show the attributes(sons and items) of the given node (ID)
      List[id].ope = true;       
    }
    //Dont do too much! So just chek the path down, beegin with the clicked node ;-)
    showTree(id,List[id].ope);
  }
  
  
  
  function showTree(id, chk1){
    //The ID is our first candidate, so does he has some sons?
    //So we will chek the settings for each son, each id!  
    
    var chk = chk1;
    var follow = chk;
    
    
    for (var i=0; i < List[id].sons.length;i++) {
      //if chk is "hide" hide all the following nodes and items
      if (!chk) {
        document.getElementById(List[id].sons[i]).style.display = "none";
        showTree(List[id].sons[i],chk);
      }
      //If chk is "show" go down the tree and chk if the following nodes and items should be visible
      else {
        //The first node must be set to visible
        document.getElementById(List[id].sons[i]).style.display = "block";
        //Check next son, if he shouldn't be shown, don't start showTree with him
        if (!List[List[id].sons[i]].ope) {
          follow = false;
        }  
      }  
      
     if(follow) showTree(List[id].sons[i],follow);
     
     follow = chk; 
    }
     
    //If the current node has some items show or hide them
      for (t=0;t< List[id].item.length;t++) {
        if (!chk) { 
          document.getElementById(List[id].item[t]).style.display = "none";
        }
        else {
          if (List[id].ope) document.getElementById(List[id].item[t]).style.display = "block";
        }
      }
  }
  
  //Initial a rootnode
  List[0]     = new Node(0,null);
  List[0].ope = false;
  
</script>
</head>

<body>


<a href="javascript:clicked(0)">Show/Hide Tree</a><br><br><hr>

<table border = 0 >

<tr></tr>

<tr name ="null" style="display:block" id="0">                 <!-- Node 0-->  
</tr>


<tr name ="eins" style="display:none" id="1">                  <!-- Node 1-->
    <td><a href="javascript:clicked('1')">[1]  |----Show Item 2</a></td>
</tr>

<script type="text/javascript">
   addNode(1,0);
</script>

<tr name ="in21" style="display:none" id="2">                  <!-- Item 1.2-->
    <td><li>[2]  File 1</li></td>
</tr>

<script type="text/javascript">
   addItem(1,2);
</script>


<script type="text/javascript">
   addNode(3,0);
   //addNode(5,1);
</script>

<tr name ="eins" style="display:none" id="3">                  <!-- Node 3-->
    <td><a href="javascript:clicked('3')">[3]  |----Show Item 4r</a></td>
</tr>

<script type="text/javascript">
  
</script>

<tr name ="in31" style="display:none" id="4">                  <!-- Item 3.1-->
    <td><li>[4]  File 2</li></td>
</tr>
<script type="text/javascript">
   addItem(3,4);
</script>
</table>


<script type="text/javascript">
   stopAdd = true;
   clicked(0);
</script>
</ul>
<hr>

</body></html>

So hab ich mir das im Wesentlichen gedacht.
Firebug sagt is alles in Ordnung, das gepostete läuft mit Mozilla wunderbar.
Auch im IE gehts.
Das JS Zeug hab ich dann in mein PHP Script eingebettet.
Da wird der obige html Code eben in einer Schleife generiert.

Aber, wenn ich die Seite mit dem PHP Code aufrufe, gehts schief... (natürlich nur im IE)
Recherchen haben ergeben, dass das PHP Script genau soweit kommt.
PHP: 
        </td> 
                  <td colspan="2" height="16" valign="top"> 
         </td> 
                </tr>
       
       <script type="text/javascript">
            addNode(1,0);
       </script>
Diese Stelle kommt ca. 120 mal vor und der IE meckert bei jeder...
Als Fehlermeldung gibt er n hässliches "Objekt erwartet" aus.

Ums vielleicht noch deutlicher zu machen:

<head><script></script></head>

<body>
<script></script>
zeug
<script></script>
zeug
.
.
.
</body>
Hat da einer ne Idee

MfG,
Zeugwart
 
Zuletzt bearbeitet:
Hi,

wie sieht das durch PHP generierte HTML-Dokument aus? Poste doch mal den Code - müssen ja nicht alle 120 Punkte sein.

Ciao
Quaese
 
Hi,

hab ich im Prinzip ja schon :)
Link

Das html, generiert vom PHP ist halt um X <tr> mehr...

Irgendwer hat mir gesagt das ich im Scriptbereich im head den browsertyp abfragen soll,
und dem Ergebnis entsprechend irgendwelche "Codes" setzen muss, damit alles korrekt verarbeitet wird...?!

Wenns nicht anders geht, werd ich halt versuchen das original erzeugte Skript zu posten,
das Prob dabei ist, das es hunderte vertrauliche Daten enthält die ich wegkürzen müsste...

Es schaut aber so aus als ob der IE funktionen die im head der html definiert sind aus dem body nicht aufrufen will, siehe vorherige Posts...


Ciao,
Zeugwart
 
Zuletzt bearbeitet:
Hallo,

also meine Vermutungen gingen in die richtige Richtung ;-)
Warums so lange gedauert hat den logischen Schluss daraus zu ziehen weis ich auch nicht...

Im PHP Script waren von meinem Vorgänger noch 2 Funktionen definiert, welche fehlerhaft
waren, aber nie irgendwo Verwendung gefunden haben.
Dadurch hat der IE wohl den "<script></script>" Teil bei der fehlerhaften Funktion abgebrochen, und den Rest vom Block nicht mehr ausgeführt...

Somit waren natürlich die Funktionen im Head alle unbekannt, und konnten auch vom body dann nicht aufgerufen werden :'-( Ich mag den IE nicht
Und ich weis was ich noch nicht mag JS debuggen!!.

Bevor ich den Thread dann abschliesse muss ich später noch ne Frage los werden...

Und danke an die helfenden :)

Bye,
Zeugwart
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück