✔ Tabellen Zeilen ein und ausblenden

[Maik]

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]

Hallo,

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

 

[Maik]

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]

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

<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">
           <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>
</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]

Hallo,

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

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

 

[KD3]

Ich denke mal das ist genau das was du suchst.

Ich bin mir sicher, dass du alles innerhalb deiner Seite über PHP (mit oder ohne AJAX) arbeitest. Die folgenden Funktionen werden dir beim einbetten in die Seite garkeine Probleme darstellen.

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

/*
**prefix = { p_ = pointer (sozusagen^^), news_ = Beispielprefix f&uuml;r dieses Beispiel }
*/

function toggle(id, foo)
{
	
	if(id.match(/\w.*?\_\d.*?\_\d+/)) {
	
		var sp = id.split('_');
	
		for(var i = 1; i <= sp[2]; i++) {
	
			document.getElementById(sp[0]+"_"+sp[1]+"_"+i).style.visibility = foo == true ? "hidden" : "visible";
	
		}
	
		var l = document.getElementById("p_"+sp[0]+"_"+sp[1]);
		l.href="javascript:toggle('"+sp[0]+"_"+sp[1]+"_"+sp[2]+"',"+(foo == true ? false : true)+");";
		l.innerHTML = foo == true ? "+" : "-";
	
	}
}

</script>
</head>
<body>
<tr><td>
<table id="news_394_5" >
<tr><td id="news_394_1">Inhalt</td></tr>
<tr><td id="news_394_2">Inhalt2</td></tr>
<tr><td id="news_394_3">Inhalt3</td></tr>
<tr><td id="news_394_4">Inhalt4</td></tr>
<tr><td id="news_394_5">Inhalt5</td></tr>
</table>
</td>
<td><a id="p_news_394" href="javascript:toggle('news_394_5',true);">-</a></td></tr>

</body></html>

 

[Maik]

Also mit meinem zuletzt gezeigten Code funktioniert da alles bestens, da werden die Zeilen nicht ineinander geschoben.

Wenn du nicht weißt, woran es liegt, dass deine neue Variante erneut nicht funktioniert, solltest du den HTML-Quellcode zur Abwechslung einfach mal vom w3c-Validator überprüfen lassen - zwei seiner Fehlermeldungen geben dir den entscheidenden Hinweis:

value of attribute "ID" invalid: "." cannot start a name.

<table id=".HauptMenu" border="0" cellspacing="0" width="100%">

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

document type does not allow element "TABLE" here.

<tr>
<table id=".HauptMenu" border="0" cellspacing="0" width="100%">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

 

[lernen.2007]

Hallo,

in Internet Explorer geht es so:

<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="5%">
<col width="25%">
<col width="44%">
</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>
</table>
<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>

Aber in Mozilla Firefox nicht. Wie sollte ich es dann ändern?

 

[Maik]

Sind die beiden genannten Fehlermeldungen nicht aussagekräftig genug?

1. Ein ID-Name darf nicht mit einem Punkt beginnen.
   
   
2. Das table-Element darf nicht auf ein tr-Element folgen.
   
   Vergleich hierzu deinen HTML-Code mit meinem zuletzt gezeigten Code für eine verschachtelte Tabelle.

Wenn du diese Fehler korrigierst, funktionert der Code auch im Firefox-Browser.

 

[lernen.2007]

Hallo,

mit deiner 2.Aussage konnte ich nichts anfangen. Ich habe wie folgt geändert, aber funktioniert immer noch nicht:

<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="5%">
<col width="25%">
<col width="44%">
</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>
</table>
<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>