✔ Tabellen Zeilen ein und ausblenden

L

lernen.2007

Erfahrenes Mitglied
Hallo,

ich will folgendes erreichen:

wenn ich in einer Link clicke dann öffnet alle tabellen zeilen die darunter stehen, wenn ich noch einmal clicke dann schließt wieder diese zeilen. Wie kann ich so etwas in Java Script erreichen?

Ich habe mit so etwas ausprobiert:

<script type="text/javascript" language="JavaScript">
function toggleDivVisibility(_div) {
if (_div.style.display=="none") {
_div.style.display="block";
} else {
_div.style.display="none";
}
}
</script>

Aber wie soll diese Funktion wissen, welche Zeilen ein oder ausgeblendet werden?

Danke
 
Vielleicht hilft dir das hier:

HTML: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">

function toggle(id) {
var a = document.getElementById(id);

if(a.style.visibility == "hidden") { a.style.visibility = "visible"; } else {a.style.visibility = "hidden";}

}
</script>
</head>
<body>
<div id="zeile" OnClick="toggle(this.id);">Text</div>
</body></html>
 
Hallo,

kannst du bitte auch ein Beispiel mit Tabellen machen? Ich will einfach in ein Link clicken dann soll die Zeilen ausgeblendet werden.

Danke
 
Hallo,

ich habe es soweit bekommen:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">

function toggle(id) {
var a = document.getElementById(id);

if(a.style.visibility == "hidden") { a.style.visibility = "visible"; } else {a.style.visibility = "hidden";}

}
</script>
</head>
<body>


<div id="zeile" OnClick="toggle(this.id);">Text
<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>
</body>
</html>

Aber Text sollte als Link erscheinen und wenn man drauf drückt dann sollte tabelle eingeblendet werden. Und wenn man nocheinmal drauf clickt dann sollte die Tabelle ausgeblendet werden. Aber ich kriege es irgendwie nicht hin. Text wird nicht als Hyperlink dargestellt und es wird auch ausgeblendet. Bitte hilft mir.
 
So gehts:
HTML: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">

function toggle(id) {
var a = document.getElementById(id);

if(a.style.display == "") 
{
    a.style.display = "none"; 
} 
else 
{
    a.style.display = "";
}

}
</script>
</head>
<body>


<a href="#" OnClick="toggle('zeile');">Text</a>
<div id="zeile">
<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>
</body>
</html>
 
Hallo zuerst danke,

warum geht es denn folgende Code nicht?

Code: 
<script type="text/javascript" language="JavaScript">
          
          function toggle(id) {
            var a = document.getElementById(id);

            if(a.style.display == "") 
            {
                a.style.display = "none"; 
            } 
            else 
            {
                a.style.display = "";
            }

        }
        </script><table border="0" cellspacing="0" width="100%">
<colgroup>
<col width="10%">
<col width="20%">
<col width="50%">
<col width="10%">
<col width="10%">
</colgroup>
<tr valign="top" class="unittests-sectionheader" align="left">
<th colspan="2">Name</th><th>Kommentar</th><th>Status</th><th nowrap="nowrap">Time(s)</th>
</tr>
<tr class="unittests-title">
<td colspan="5"><a href="#" OnClick="toggle('zeile');">.Testen</a></td>
</tr>
<div id="zeile">
<tr class="unittests-data">
<td>&nbsp;</td><td>testeMal</td><td></td><td>Success</td><td>6.670</td>
</tr>
</div>
<tr class="unittests-data">
<td colspan="2">&nbsp;
      </td><td>&nbsp;
      </td><td>&nbsp;
      </td><td>&nbsp;</td>
</tr>
<tr>
<td colspan="5">
        &nbsp;
      </td>
</tr>
</table>

Es funktioniert irgendwie nicht. Warum?
 
Hi,

das div-Element ist kein Nachbarelement des tr-Elements, und hat somit an dieser Stelle des Quelltextes nichts zu suchen.

Lösung: Entferne es vollständig aus dem Markup und ruf stattdessen die ID #zeile direkt in der Tabellenzeile auf.
 
Hallo,

ich habe wie folgt geändert, aber es geht immer noch nicht:

Code: 
<script type="text/javascript" language="JavaScript">
          
           function toggle(id) {
            var a = document.getElementById(id);

            if(a.style.display == "") 
            {
                a.style.display = "none"; 
            } 
            else 
            {
                a.style.display = "";
            }

        }
        </script><table border="0" cellspacing="0" width="100%">
<colgroup>
<col width="10%">
<col width="20%">
<col width="50%">
<col width="10%">
<col width="10%">
</colgroup>
<tr valign="top" class="unittests-sectionheader" align="left">
<th colspan="2">Name</th><th>Kommentar</th><th>Status</th><th nowrap="nowrap">Time(s)</th>
</tr>
<tr class="unittests-title">
<td colspan="5"><a href="#" OnClick="toggle('zeile');">.TestMenu</a></td>
</tr>
<tr id="zeile" class="unittests-data">
<td>&nbsp;</td><td>TestMenus</td><td></td><td>Success</td><td>46.415</td>
</tr>
<tr id="zeile" class="unittests-data" bgcolor="#EEEEEE">
<td>&nbsp;</td><td>MenuTest</td><td></td><td>Success</td><td>31.945</td>
</tr>
<tr id="zeile" class="unittests-data">
<td colspan="2">&nbsp;
      </td><td>&nbsp;
      </td><td>&nbsp;
      </td><td>&nbsp;</td>
</tr>
<tr id="zeile">
<td colspan="5">
        &nbsp;
      </td>
</tr>
</table>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück