kane1896: Auf mehrere Elemente mit gleicher Teil-ID zugreifen

Hallo,

ich habe eine Tabelle mit mehreren Zeilen. Diese sind zu beginn alle mit style.display = "none" ausgeblendet.

Jede zeile hat eine ID.
Bsp: Zeile_1_1
     Zeile_2_1
     Zeile_1_2
     Zeile_2_2

Mit einem Click auf einen Link möchte ich nun das alle Zeilen die mit Zeile_1 beginnen einblenden, also Zeile_1_1 und Zeile_1_2.

Die Function um Elemente einzublenden funktioniert. Ich brauch jetzt nur eine Schleife (wahrscheinlich for in) die alle Elemente mit Anfags ID Zeile_1 durchläuft.

Eine andere Möglichkeit, die mir auch besser weiterhelfen würde wäre,
wenn es die Möglichkeit gibt eine gleiche ID (oder andere Eigenschaft) für mehrere Zeilen zu vergeben also in diesem Bsp, dass es nur Zeile_1 und Zeile_2 je zweimal gibt, und automatisch beide Zeilen mit ID (oder ähnlichen) Zeile_1 eingeblendet werden.

Danke

  1. Eine andere Möglichkeit, die mir auch besser weiterhelfen würde wäre, wenn es die Möglichkeit gibt eine gleiche ID

    Das geht natürlich nicht. ID steht für Identifikator, und verschiedene Objekte müssen verschiedene IDs haben, so wie verschiedene Personenen verschiedene Personalausweise (ID-Cards) haben.

    (oder andere Eigenschaft) für mehrere Zeilen zu vergeben

    Das geht natürlich. Was du suchst, sind Klassen: http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen

    Gunnar

    --
    Good results come from experience; and experience comes from bad results.
    1. Eine andere Möglichkeit, die mir auch besser weiterhelfen würde wäre, wenn es die Möglichkeit gibt eine gleiche ID

      Das geht natürlich nicht. ID steht für Identifikator, und verschiedene Objekte müssen verschiedene IDs haben, so wie verschiedene Personenen verschiedene Personalausweise (ID-Cards) haben.

      (oder andere Eigenschaft) für mehrere Zeilen zu vergeben

      Das geht natürlich. Was du suchst, sind Klassen: http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen

      Gunnar

      Hallo Gunnar,

      hier mein Quellcode, wie ich esbis jetzt gemacht habe:

      ------------------
      function ToggleFrontNews (id)
      {
       if (document.getElementById("FrontNewsRow_" + id).style.display == 'none')
       {
        if(document.getElementByName("FrontNewsRow_" + id))
        {
         document.getElementByName("FrontNewsImg_" + id).src = "collapse.gif";
         document.getElementByName("FrontNewsRow_" + id).style.display = "";
         document.getElementByName("FrontNewsImg_" + id).alt = "weg";
        }
       }
       else
       {
        if(document.getElementByName("FrontNewsRow_" + id))
        {
         document.getElementByName("FrontNewsImg_" + id).src = "expand.gif";
         document.getElementByName("FrontNewsRow_" + id).style.display = "none";
         document.getElementByName("FrontNewsImg_" + id).alt = "anzeigen";
        }
       }
      }

      <table>
       <tr>
        <td>
         <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
           <td width="18px" align="left">
            <a href="javascript:ToggleFrontNews('1')">
             <img alt="anzeigen" src="expand.gif" border="0" id="FrontNewsImg_1" style="position: relative; left: -2px;"/>
            </a>
           </td>
          </tr>
         </table>
        </td>
       </tr>
       <tr name="FrontNewsRow_1" style="display: none">
        <td>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td>
            hallo
           </td>
          </tr>
         </table>
        </td>
       </tr>
       <tr name="FrontNewsRow_1" style="display: none">
        <td>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
           <td>
            hallo2
           </td>
          </tr>
         </table>
        </td>
       </tr>
      </table>
      ---------------------

      Kanns du mir bitte helfen den Code umzubauen. Ich kann zwar statt der ID in der Zeile die class hinterlegen, nur weiss ich dann nicht, wie ich mit JavaScript draufzugreife, weil es sowas wie getElementByClass nicht gibt.

      1. Hallo,

        if(document.getElementByName("FrontNewsRow_" + id))

        ^   hier fehlt ein "s"!
        http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_name

        daher bezweifle ich, dass es so funktioniert hat. Ich bin auch nicht sicher, ob <td name="..."> erlaubt ist. Nicht alle Elemente durfen einen Namen haben.

        Bei der Änderung der Klassen (document.getElementById("...").className="class2") musst Du alle Elemente genauso in einer Schleife anpassen, wie bei der Änderung der css-Eigenschaften. Ist denn Deine Tabelle so groß, dass es wirklich so lange dauert?

        Gruß, Jürgen

        1. Hallo,

          if(document.getElementByName("FrontNewsRow_" + id))
                                           ^   hier fehlt ein "s"!
          http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_name

          daher bezweifle ich, dass es so funktioniert hat. Ich bin auch nicht sicher, ob <td name="..."> erlaubt ist. Nicht alle Elemente durfen einen Namen haben.

          Bei der Änderung der Klassen (document.getElementById("...").className="class2") musst Du alle Elemente genauso in einer Schleife anpassen, wie bei der Änderung der css-Eigenschaften. Ist denn Deine Tabelle so groß, dass es wirklich so lange dauert?

          Gruß, Jürgen

          sorry Jürgen, hab da was falsch gepostet. Hier der richtige Quellcode, wie ich es vorher mit einer For-Schleife gemacht hab:

          function ToggleFrontNews (id)
          {
           if (document.getElementById("FrontNewsRow_" + id + "_1").style.display == 'none')
           {
            for (i = 0; i <= 5; i++)
            {
             if(document.getElementById("FrontNewsRow_" + id + "_" + i))
             {
              document.getElementById("FrontNewsImg_" + id).src = "collapse.gif";
              document.getElementById("FrontNewsRow_" + id + "_" + i).style.display = "";
              document.getElementById("FrontNewsImg_" + id).alt = "weg";
             }
            }
           }
           else
           {
            for (i = 0; i <= 5; i++)
            {
             if(document.getElementById("FrontNewsRow_" + id + "_" + i))
             {
              document.getElementById("FrontNewsImg_" + id).src = "expand.gif";
              document.getElementById("FrontNewsRow_" + id + "_" + i).style.display = "none";
              document.getElementById("FrontNewsImg_" + id).alt = "anzeigen";
             }
            }
           }
          }

          <table>
           <tr>
            <td>
             <a href="javascript:ToggleFrontNews('1')">
              <img alt="anzeigen" src="expand.gif" border="0" id="FrontNewsImg_1" style="LEFT: -2px; POSITION: relative">
             </a>
            </td>
           </tr>
           <tr id="FrontNewsRow_1_1" style="DISPLAY: none">
            <td>
             hallo1
            </td>
           </tr>
           <tr id="FrontNewsRow_1_2" style="DISPLAY: none">
            <td>
             hallo2
            </td>
           </tr>
          </table>

        2. Hallo,

          if(document.getElementByName("FrontNewsRow_" + id))
                                           ^   hier fehlt ein "s"!
          http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_name

          daher bezweifle ich, dass es so funktioniert hat. Ich bin auch nicht sicher, ob <td name="..."> erlaubt ist. Nicht alle Elemente durfen einen Namen haben.

          Bei der Änderung der Klassen (document.getElementById("...").className="class2") musst Du alle Elemente genauso in einer Schleife anpassen, wie bei der Änderung der css-Eigenschaften. Ist denn Deine Tabelle so groß, dass es wirklich so lange dauert?

          Gruß, Jürgen

          Es dauert wirklich leider solange, da mehrere 100.000 Datensätze in der Tabelle stehen können

          1. Hallo,

            Es dauert wirklich leider solange, da mehrere 100.000 Datensätze in der Tabelle stehen können

            Ich glaube, da hast Du den falschen Ansatz gewählt. Ich würde nur das laden, was der Besucher auch sehen soll und statt des Einblendens würde ich die Seite (ich vermute, sie wird serverseitig aus einer Datenbank erzeugt) neu erstellen und übertragen. Eine Seite mit mehreren 100.000 Datensätzen dürfte doch ca. 10-100 MB groß sein. Also mein alter PI unter W98 würde sowas nicht überstehen, mal ganz abgesehen von der Ladezeit (... aber ich bin ja noch jung).

            Gruß, Jürgen

            1. Hallo,

              Es dauert wirklich leider solange, da mehrere 100.000 Datensätze in der Tabelle stehen können

              Ich glaube, da hast Du den falschen Ansatz gewählt. Ich würde nur das laden, was der Besucher auch sehen soll und statt des Einblendens würde ich die Seite (ich vermute, sie wird serverseitig aus einer Datenbank erzeugt) neu erstellen und übertragen. Eine Seite mit mehreren 100.000 Datensätzen dürfte doch ca. 10-100 MB groß sein. Also mein alter PI unter W98 würde sowas nicht überstehen, mal ganz abgesehen von der Ladezeit (... aber ich bin ja noch jung).

              Gruß, Jürgen

              Die Seite neu zu laden ist auch schwer.
              Es gibt nämlich sehr viele Knotenpunkte, die unterschiedlich entwerder aufgeklappt oder nicht aufgeklappt sein können. Ich müsste dann immer die Werte übertragen, welche Knotenpunkte aufgeklappt sind und welche nicht. Vielleicht würde das in einem Array gehen (ich wüsse zwar zur Zeit nicht wie), aber das stell ich mir sehr aufwendig vor.

            2. Hallo,

              Es dauert wirklich leider solange, da mehrere 100.000 Datensätze in der Tabelle stehen können

              Ich glaube, da hast Du den falschen Ansatz gewählt. Ich würde nur das laden, was der Besucher auch sehen soll und statt des Einblendens würde ich die Seite (ich vermute, sie wird serverseitig aus einer Datenbank erzeugt) neu erstellen und übertragen. Eine Seite mit mehreren 100.000 Datensätzen dürfte doch ca. 10-100 MB groß sein. Also mein alter PI unter W98 würde sowas nicht überstehen, mal ganz abgesehen von der Ladezeit (... aber ich bin ja noch jung).

              Gruß, Jürgen

              Oder weisst du, ob es ne Möglichkeit gibt eine Schleife zu bauen, die eben nur alle vorkommenden IDs durchgeht die mit Zeile_1 beginnen, also irgendwas mit "like"?
              Das würde dann schon sehr viel bringen. Dann bräuchte ich nämlich nicht von 1 bis z.B. 500 alle durchgehen und prüfen ob es die IDs gibt, obwohl es nur Zeile_1_1 und Zeile_1_2 gibt, sondern das er automatisch nur die beiden durchgeht.

              1. Hallo,

                Oder weisst du, ob es ne Möglichkeit gibt eine Schleife zu bauen, die eben nur alle vorkommenden IDs durchgeht die mit Zeile_1 beginnen, also irgendwas mit "like"?
                Das würde dann schon sehr viel bringen. Dann bräuchte ich nämlich nicht von 1 bis z.B. 500 alle durchgehen und prüfen ob es die IDs gibt, obwohl es nur Zeile_1_1 und Zeile_1_2 gibt, sondern das er automatisch nur die beiden durchgeht.

                so, wie ich es oben schon geschrieben habe:

                for(i=1;i<=Endwert;i++) getElemenById("Zeile_1_"+i).style= ... ;

                Hierbei musst Du aber wissen, wieviele "Zeile_1_n" es gibt. Wenn dieses nicht bekannt ist, bietet sich eine while-Schleife an:

                var i=1;
                while(getElemenById("Zeile_1_"+i)) {
                 getElemenById("Zeile_1_"+i).style= ... ;
                 i++;
                }

                Hier wird erst geprüft, ob das Element mit der ID existiert, und wenn Ja, wird es bearbeitet, wenn nein, wird die Sache beendet. Die ID's müssen dann aber fortlaufend nummeriert sein, alse x_1, x_2, x_3, ... . Bei x_1, x_3, x_4 würde der Algorithmus nach dem ersten Element abbrechen.

                Gruß, Jürgen

                1. var i=1;
                  while(getElemenById("Zeile_1_"+i)) {
                   getElemenById("Zeile_1_"+i).style= ... ;
                   i++;
                  }

                  Vielen Vielen Dank Jürgen,

                  das ist das, was ich gebraucht habe.

                  Die Schleife geht im durchschnitt ca. bis 500. Kostet vielleicht ein bisschen Rechenpower, aber das sollten die Computer hier abkönnen.

  2. Hallo!

    Die Function um Elemente einzublenden funktioniert. Ich brauch jetzt nur eine Schleife (wahrscheinlich for in) die alle Elemente mit Anfags ID Zeile_1 durchläuft.

    Du wirst jede Zeile der Tabelle durchlaufen und die ID abfragen müßen. Wenn Du die ID hast, testest Du den Wert der ID ob der String "Zeile_1" enthalten ist. Das machst Du am besten mit dem node-Objekt. http://selfhtml.teamone.de/javascript/objekte/node.htm

    MfG, André Laugks

    --
    L-Andre @ gmx.de
    1. Hallo!

      Die Function um Elemente einzublenden funktioniert. Ich brauch jetzt nur eine Schleife (wahrscheinlich for in) die alle Elemente mit Anfags ID Zeile_1 durchläuft.

      Du wirst jede Zeile der Tabelle durchlaufen und die ID abfragen müßen. Wenn Du die ID hast, testest Du den Wert der ID ob der String "Zeile_1" enthalten ist. Das machst Du am besten mit dem node-Objekt. http://selfhtml.teamone.de/javascript/objekte/node.htm

      MfG, André Laugks

      Hallo André,

      ich kann leider alle Zeilen nicht durchlaufen, da es viel zu viele sind. Habe ich schonmal mit einer For-Schleife ausprobiert.

  3. Hallo,

    Mit einem Click auf einen Link möchte ich nun das alle Zeilen die mit Zeile_1 beginnen einblenden, also Zeile_1_1 und Zeile_1_2.

    Die Function um Elemente einzublenden funktioniert. Ich brauch jetzt nur eine Schleife (wahrscheinlich for in) die alle Elemente mit Anfags ID Zeile_1 durchläuft.

    in der for-Schleife mit Laufindex i einfach die ID erzeugen:
    ID = "Zeile_1_"+i ;

    Eine andere Möglichkeit, die mir auch besser weiterhelfen würde wäre,
    wenn es die Möglichkeit gibt eine gleiche ID (oder andere Eigenschaft) für mehrere Zeilen zu vergeben also in diesem Bsp, dass es nur Zeile_1 und Zeile_2 je zweimal gibt, und automatisch beide Zeilen mit ID (oder ähnlichen) Zeile_1 eingeblendet werden.

    ´
    ID's müssen eindeutig sein. Du kannst aber mit Klassen arbeiten. Zugriff auf Klassennamen geht über className.

    Gruß, Jürgen

    1. Hallo,

      Mit einem Click auf einen Link möchte ich nun das alle Zeilen die mit Zeile_1 beginnen einblenden, also Zeile_1_1 und Zeile_1_2.

      Die Function um Elemente einzublenden funktioniert. Ich brauch jetzt nur eine Schleife (wahrscheinlich for in) die alle Elemente mit Anfags ID Zeile_1 durchläuft.

      in der for-Schleife mit Laufindex i einfach die ID erzeugen:
      ID = "Zeile_1_"+i ;

      Eine andere Möglichkeit, die mir auch besser weiterhelfen würde wäre,
      wenn es die Möglichkeit gibt eine gleiche ID (oder andere Eigenschaft) für mehrere Zeilen zu vergeben also in diesem Bsp, dass es nur Zeile_1 und Zeile_2 je zweimal gibt, und automatisch beide Zeilen mit ID (oder ähnlichen) Zeile_1 eingeblendet werden.
      ´
      ID's müssen eindeutig sein. Du kannst aber mit Klassen arbeiten. Zugriff auf Klassennamen geht über className.

      Gruß, Jürgen

      Hallo Jürgen,

      mit einer For-Schleife geht leider nicht, da es viel zu viele Zeilen sind. Hatte ich schonmal ausprobiert.

      Ich hab in der Antwort an Gunnar meinen Quellcode gepostet. Vielleicht könnten du mir da helfen wie ich ihn umändere, das ich mit JavaScript statt durch getElementById auf die Klasse zugreife.