Tabellen Zeilen ein und ausblenden @ tutorials.de: Tutorials, Forum & Hilfe

lernen.2007 · 11.05.08 13:13

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

KD3 · 11.05.08 13:48

Vielleicht hilft dir das hier:

HTML-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</div>
</body></html>

Maik · 11.05.08 14:03

Hi,

ansonsten schau dir mal Expandable "Detail" Table Rows an.

lernen.2007 · 11.05.08 19:59

Hallo,

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

Danke

warcraft9105 · 11.05.08 23:25

Schau dir mal das hier an: http://www.tutorials.de/forum/javasc...roperties.html

lernen.2007 · 12.05.08 00:26

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.

warcraft9105 · 12.05.08 00:54

So gehts:

HTML-Code:

<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>

lernen.2007 · 12.05.08 13:16

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?

Maik · 12.05.08 13:25

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.

lernen.2007 · 12.05.08 13:48

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>

Maik · 12.05.08 13:53

Entgegen deinem letzten Quellcode rufst du die ID nun in mehreren Zeilen auf, was aber auch nicht regelkonform ist, da eine ID im HTML-Dokument eindeutig sein muss, sprich darin nicht mehrmals vergeben werden darf.

Folglich blenden die Browser auch nur die erstgenannte Zeile mit der ID #zeile ein und aus.

lernen.2007 · 12.05.08 13:54

Hallo,

wie kann ich denn oberen Code so strukturieren, dass es funktioniert? Hilf mir bitte.

Maik · 12.05.08 14:00

Indem du die Tabelle an dieser Stelle verschachtelst, also in der Tabellenzelle td dieser Tabellenzeile eine weitere Tabelle einbettest, die die Zeilen (ohne ID!) enthält, die ein- und ausgeblendet werden sollen.

Maik · 12.05.08 14:15

Das Ganze würde dann in der Praxis so aussehen:

Code :

<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>
       [b]<tr id="zeile">
           <td colspan="5">
               <table width="100%">
                      <tr class="unittests-data">
                          <td>&nbsp;</td><td>TestMenus</td><td>&nbsp;</td><td>Success</td><td>46.415</td>
                      </tr>
                      <tr class="unittests-data" bgcolor="#EEEEEE">
                          <td>&nbsp;</td><td>MenuTest</td><td>&nbsp;</td><td>Success</td><td>31.945</td>
                      </tr>
                      <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>
           </td>
       </tr>[/b]
</table>

P.S. Wenn du dich meiner eingangs des Themas empfohlenen Technik bedienst, sind diese Um- und Ausbaumaßnahmen im bestehenden HTML-Code überhaupt nicht erforderlich

lernen.2007 · 12.05.08 16:32

Hallo,

wenn ich auf den Link clicke dann wird die untere Zeilen ineinander bzw. zusammen geschoben:

Code :

<script type="text/javascript" language="JavaScript">
          
          function toggleDivVisibility(_div) {
            if (_div.style.display=="none") {
              _div.style.display="block";
            } else {
              _div.style.display="none";
            }
          }
        </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>Comment</th><th>Status</th><th nowrap="nowrap">Time(s)</th>
</tr>
<tr class="unittests-title">
<td colspan="5"><a href="#" onClick="toggleDivVisibility(document.getElementById('.HauptMenu'))">.HauptMenu</a></td>
</tr>
<table id=".HauptMenu" border="0" cellspacing="0" width="100%">
<colgroup>
<col width="10%">
<col width="20%">
<col width="50%">
<col width="10%">
<col width="10%">
</colgroup>
<tr class="unittests-data">
<td>&nbsp;</td><td>TestMenu1</td><td></td><td>Success</td><td>46.415</td>
</tr>
<tr class="unittests-data" bgcolor="#EEEEEE">
<td>&nbsp;</td><td>TestMenu2</td><td></td><td>Success</td><td>31.945</td>
</tr>
<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>
</table>

Ich weiß nicht woran es liegt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

TListView Zeilen ausblenden

Zeilen ausblenden

Zeilen in JTable ausblenden

Zeilen en-bloc ein/ausblenden

[C++ MFC] Zeilen in CListCtrl ausblenden

E-Mail:

Abonnieren Abbestellen