fion: Tabellenteile aus-/einblenden

SELF-Forum

Tabellenteile aus-/einblenden

fion
– Informationen zu den Bewertungsregeln

Hi,
ich habe ein Layout mit mehreren Tabellen. Einige dieser Tabellen in der Mitte des Layouts bestehen immer aus 3 Zeilen. Diese Tabellen will ich beim Laden alle reduzieren, d,h, es soll nur die erste Zeile angezeigt und darunter ein Link zum öffnen der jeweiligen Tabelle erstellt werden. Wenn man auf den Link zum öffnen klickt wird der Rest der Tabelle wieder angezeigt und der Link ändert sich zum "Schließenlink". Die anderen Tabellen sollen dabei unberührt bleiben.
Dazu habe ich 2 Funktionen geschrieben:

function hide_tableDetails (tableID) {
 if(tableID == 'all') {
  // Hier eine Schleife die alle Tabellen durchläuft.
  // Hat eine Tabelle eine ID (egal welche),
  // blende Tabellenzeile 2 und 3 aus und füge
  // eine Tabellenzeile an wo drinsteht
  // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a>
 } else {
  var table = document.getElementById(tableID);

for (var r = 1; r < (table.rows.length - 1); r++) {
   table.rows[r].style.display = 'none';
  }
  // Hier den Link in der letzten Zeile von
  // <a href="javascript:hide_tableDetails(tableID)">Details verbergen</a> nach
  // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a> ändern
 }
}

function show_tableDetails (tableID) {
 var table = document.getElementById(tableID);

for (var r = 1; r < (table.rows.length - 1); r++) {
  table.rows[r].style.display = '';
 }
 // Hier den Link in der letzten Zeile von
 // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a> nach
 // <a href="javascript:hide_tableDetails(tableID)">Details verbergen</a> ändern
}

Beim laden der Seite wird die Funktion (hide_tableDetails mit dem Parameter 'all' aufgerufen. Überall wo jetzt Kommentare stehen, weis ich einfach nicht weiter.
Frage 1: Wie kann ich alle Tabellen durchlaufen und wenn sie eine ID haben die entsprechenden Zeilen verbergen?
Frage 2: Wie kann ich an die gefundenen Tabellen eine Zeile anfügen, in der der neue Link erstellt wird?
Danke im Voraus für eure Hilfe.
fion

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabellenteile aus-/einblenden

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo fion,

    Beim laden der Seite wird die Funktion (hide_tableDetails mit dem Parameter 'all' aufgerufen. Überall wo jetzt Kommentare stehen, weis ich einfach nicht weiter.

    Frage 1: Wie kann ich alle Tabellen durchlaufen und wenn sie eine ID haben die entsprechenden Zeilen verbergen?

    Mir sind Übergabeparameter ja total zuwider; mit Ausnahme von "this"

    Frage 2: Wie kann ich an die gefundenen Tabellen eine Zeile anfügen, in der der neue Link erstellt wird?

    Es würde sehr helfen, wenn wir dein Zwischenergebnis "en vivo", also zumindest partiell funktionstüchtig mal im Netz sehen würden. Vielleicht hilft dir aber auch einstweilen meine Studie zu "Tabellenteile auf- und zuklappen":

    http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html
    http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html

    oder auch Cybaers toggle-Funktion.

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabellenteile aus-/einblenden

      fion
      – Informationen zu den Bewertungsregeln

      Hallo Gernot,
      im Netz kann man mein "Wunderwerk" nicht finden (ist noch lokal in arbeit).
      Mein Problem besteht darin, dass ich die Tabellen-ID nicht kenne. Vielleicht mal mehr Infos zum Projekt:
      Ich will mit der Seite eine Personalübersicht ausgeben. Die Daten stammen aus einer MySQL-DB und als Tabellen-ID nehm ich einfach die Personal-ID des Mitarbeiters (verhindert Dopplungen). Ich weis also noch nicht wieviel Tabellen ausgegeben werden und in welcher Reihenfolge (da alphabetisch nach Namen sortiert). Vielleicht kann man mit ner While-Schleife und RegExp über alle Tabellen mit ID's laufen. Egal welche ID die Tabelle dann hat, sie wird eingeklappt und ein Link angehängt. Vereinfacht sieht die ausgegebene Datei bis jetzt so aus:

      <html>
      <head>
      <TITLE>Test</TITLE>
      <script language="JavaScript" type="text/javascript">
      function hide_tableDetails (tableID) {
       if(tableID == 'all') {
        // Hier die Schleife.
        // So funktioniert es aber nicht?!
        while(var table = document.getElementById.match(/^\d{1,}$/)) {
         for(var i = 1; i < table.rows.length; i++) {
          table.rows[i]style.display = 'none';
         }
         // hier noch eine Tabellenzeile einfügen
         // und den Link reinschreiben
         // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a>
        }
       } else {
        var table = document.getElementById(tableID);

      for (var r = 1; r < (table.rows.length - 1); r++) {
         table.rows[r].style.display = 'none';
        }
        // Hier den Link in der letzten Zeile von
        // <a href="javascript:hide_tableDetails(tableID)">Details verbergen</a> nach
        // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a> ändern
       }
      }

      function show_tableDetails (tableID) {
       var table = document.getElementById(tableID);

      for (var r = 1; r < (table.rows.length - 1); r++) {
        table.rows[r].style.display = '';
       }
       // Hier den Link in der letzten Zeile von
       // <a href="javascript:show_tableDetails(tableID)">Details anzeigen</a> nach
       // <a href="javascript:hide_tableDetails(tableID)">Details verbergen</a> ändern
      }
      </script>
      </head>
      <body onload="hide_tableDetails('all')">
      <table id="101" border="1">
       <TR>
        <TH>Personal-Nr.</TH>
        <TH>Name</TH>
        <TH>Vorname</TH>
       </TR>
       <TR>
        <TD>101</TD>
        <TD>Mustermann</TD>
        <TD>Max</TD>
       </TR>
       <TR>
        <TH>Stra&szlig;e</TH>
        <TH>PLZ</TH>
        <TH>Ort</TH>
       </TR>
       <TR>
        <TD>Musterstr. 1</TD>
        <TD>12345</TD>
        <TD>Musterstadt</TD>
       </TR>
       <TR>
        <TH>Telefon</TH>
        <TH>Fax</TH>
        <TH>Mobil</TH>
       </TR>
       <TR>
        <TD>01234/56789</TD>
        <TD>01234/56789</TD>
        <TD>0123/4567890</TD>
       </TR>
      </table>
      <br>
      <table id="105" border="1">
       <TR>
        <TH>Personal-Nr.</TH>
        <TH>Name</TH>
        <TH>Vorname</TH>
       </TR>
       <TR>
        <TD>105</TD>
        <TD>Musterfrau</TD>
        <TD>Maxime</TD>
       </TR>
       <TR>
        <TH>Stra&szlig;e</TH>
        <TH>PLZ</TH>
        <TH>Ort</TH>
       </TR>
       <TR>
        <TD>Musterstr. 75</TD>
        <TD>12345</TD>
        <TD>Musterstadt</TD>
       </TR>
       <TR>
        <TH>Telefon</TH>
        <TH>Fax</TH>
        <TH>Mobil</TH>
       </TR>
       <TR>
        <TD>01234/98765</TD>
        <TD>01234/98765</TD>
        <TD>0123/9876543</TD>
       </TR>
      </table>
      </body>
      </html>

      Wie schon im Kommentar geschrieben, geht die Schleife so nicht. Es wird nichts zurückgegeben. Ich vermute, ich kann die match-Funktion so nicht auf getElementById anwenden. Ich möchte die Tabellen auch erst beim Laden der Seite einklappen lassen, damit User ohne JavaScript trotzdem alle Infos sehen, nur halt mächtig scrollen müssen ;-).
      Regards, fion.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tabellenteile aus-/einblenden

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        if(tableID == 'all') {
          // Hier die Schleife.
          // So funktioniert es aber nicht?!
          while(var table = document.getElementById.match(/^\d{1,}$/)) {

        Was willst du an dieser Stelle machen?
        In einer Schleife über alle Tabellen im Dokument laufen?

          
var Tabellen = document.getElementsByTagName("table");  
var AnzahlTabellen = Tabellen.length;  
for(var i=0; i<AnzahlTabellen; i++) {  
    tuwasmit(Tabellen[i]);  
}

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Tabellenteile aus-/einblenden

          fion
          – Informationen zu den Bewertungsregeln

          Hi wahsaga,

          if(tableID == 'all') {
            // Hier die Schleife.
            // So funktioniert es aber nicht?!
            while(var table = document.getElementById.match(/^\d{1,}$/)) {

          Was willst du an dieser Stelle machen?
          In einer Schleife über alle Tabellen im Dokument laufen?

          Ich will eine Schleife über alle Tabellen laufen lassen, die eine ID haben (egal welche).

          var Tabellen = document.getElementsByTagName("table");
          var AnzahlTabellen = Tabellen.length;
          for(var i=0; i<AnzahlTabellen; i++) {
              tuwasmit(Tabellen[i]);
          }

            
Hab Deinen Vorschlag auf mein Anliegen etwas eingepasst und schon gehts nicht mehr:  
~~~javascript
  
var alltables = document.getElementById("table");  
for(var i = 0; i < alltables.length; i++) {  
 for(var j = 1; j < alltables[i].rows.length; j++) {  
  alltables[i].rows[j].style.display = 'none';  
 }  
}

          Ich hab die Tabellen-ID's enfach mal alle gleich mit 'table' benannt. Ich komme aber nicht in die Schleife. Warum?

          gruß,
          wahsaga

          Regards, fion.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Tabellenteile aus-/einblenden

            MudGuard Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Ich hab die Tabellen-ID's enfach mal alle gleich mit 'table' benannt.

            id-Werte müssen dokumentweit eindeutig sein.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Tabellenteile aus-/einblenden

            MudGuard Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Sorry, zu früh abgeschickt.

            var alltables = document.getElementById("table");

            Das liefert maximal ein Element - da id-Werte ja eindeutig sein müssen (darum heißt die Methode ja auch nicht
            getElementsById, sondern
            getElementById.

            alltables ist also kein Array.

            for(var i = 0; i < alltables.length; i++) {

            Damit ist alltables.length undefined.
            Und dann hat i < alltables.length den Wert false.
            Damit wird die Schleife nicht betreten.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Tabellenteile aus-/einblenden

              fion
              – Informationen zu den Bewertungsregeln

              Hallo,
              mit Hilfe eines weiteren Forums und etwas Anpassung hab ich eine Lösung. Wen es interessiert hier meine Datei:

                
<html>  
<head>  
<script type="text/javascript">  
function table_init() {  
 var tables = document.getElementsByTagName("table");  
 for (var i=0; i<tables.length; i++) {  
  var table = tables[i];  
  if (table.id && table.id.length > 0) {  
  
   hide_tableDetails(table.id);  
  }  
 }  
}  
function hide_tableDetails(tableID) {  
 var table = document.getElementById(tableID);  
  
 for (var r = 1; r < (table.rows.length - 1); r++) {  
  table.rows[r].style.display = "none";  
 }  
  
 var links = table.getElementsByTagName("a"); // .getElementsByTagName("a")  
 link = links[links.length-1];  
 link.table_ID = table.id;  
 link.href = "javascript:show_tableDetails('" + link.table_ID + "');";  
 link.firstChild.nodeValue = "Details anzeigen"  
}  
  
function show_tableDetails(tableID) {  
 var table = document.getElementById(tableID);  
  
 for (var r = 1; r < (table.rows.length - 1); r++) {  
  table.rows[r].style.display = '';  
 }  
 var links = table.getElementsByTagName("a"); // .getElementsByTagName("a")  
 link = links[links.length-1];  
 link.table_ID = table.id;  
 link.href = "javascript:hide_tableDetails('" + link.table_ID + "');";  
 link.firstChild.nodeValue = "Details verbergen"  
}  
</script>  
</head>  
<body onload="table_init();">  
<a name="top">Hier ist oben</a>  
<table style="background-color:#eeeeee; margin:auto auto; border: 1px dashed #000;" cellpadding="10">  
<tr><td>  
  
<table border="1" id="table1">  
<tr>  
 <td>text1 basdfasdf <br> asdfasdf <a href="http://www.google.com/">ein link</a> asdfasdf </td>  
</tr>  
<tr>  
 <td>details1</td>  
</tr>  
<tr>  
 <td>zeile3_1</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1" id="table2">  
<tr>  
 <td>text2</td>  
</tr>  
<tr>  
 <td>details2</td>  
</tr>  
<tr>  
 <td>zeile3_2</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1" id="table3">  
<tr>  
 <td>text3</td>  
</tr>  
<tr>  
 <td>details3</td>  
</tr>  
<tr>  
 <td>zeile3_3</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1">  
<tr>  
 <td>Die bleibt unber&uuml;hrt</td>  
</tr>  
<tr>  
 <td>zeile4_2</td>  
</tr>  
<tr>  
 <td>zeile4_3</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
</td></tr></table>  
  
</body>  
</html>

              Danke an alle, die fleißig mit geholfen haben :-).
              fion

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

        2. Tabellenteile aus-/einblenden

          fion
          – Informationen zu den Bewertungsregeln

          Hi wahsaga,

          if(tableID == 'all') {
            // Hier die Schleife.
            // So funktioniert es aber nicht?!
            while(var table = document.getElementById.match(/^\d{1,}$/)) {

          Was willst du an dieser Stelle machen?
          In einer Schleife über alle Tabellen im Dokument laufen?

          Ich will eine Schleife über alle Tabellen laufen lassen, die eine ID haben (egal welche).

          var Tabellen = document.getElementsByTagName("table");
          var AnzahlTabellen = Tabellen.length;
          for(var i=0; i<AnzahlTabellen; i++) {
              tuwasmit(Tabellen[i]);
          }

            
Hab Deinen Vorschlag auf mein Anliegen etwas eingepasst und schon gehts nicht mehr:  
~~~javascript
  
var alltables = document.getElementById("table");  
for(var i = 0; i < alltables.length; i++) {  
 for(var j = 1; j < alltables[i].rows.length; j++) {  
  alltables[i].rows[j].style.display = 'none';  
 }  
}

          Ich hab die Tabellen-ID's enfach mal alle gleich mit 'table' benannt. Ich komme aber nicht in die Schleife. Warum?

          gruß,
          wahsaga

          Regards, fion.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Tabellenteile aus-/einblenden

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            Ich will eine Schleife über alle Tabellen laufen lassen, die eine ID haben (egal welche).

            Also genauso, wie von mir vorgeschlagen - und innerhalb der Schleife dann noch prüfen, ob Tabellen[i].id einen Wert hat.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Tabellenteile aus-/einblenden

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        <table id="101" border="1">

        Zahlen sind keine gültigen Werte für id-Attribute (die müssen mit einem Buchstaben beginnen).

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln