✔ Zeile einer Tabelle einblenden/ausblenden

Ahso...es liegt an der Selectbox, der IE interpretiert kein onclick in <option>

Schreibs so:
Code: 
<select name="tabellenuebersicht" onchange="show_tabelle(this.value)">
   <option>Mannschaft...</option>
  <option>----------------------</option>
  <option value="1maenner">1. M&auml;nner</option>
  <option value="2maenner">2. M&auml;nner</option>
  <option value="1frauen">1.Frauen</option>
</select>
 
Hallo,

hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

Tschüß

Brunni
 
Hi,
Brunni hat gesagt.:
Hallo,

hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

Tschüß

Brunni
Zum Vergrößern anklicken....
Die wichtigen Zeilen / Passagen sind hier fett markiert:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// <![CDATA[

function setVisibility(rowName) {
        // Tabellenzelle ermitteln

        var actualVisibility=document.getElementById(rowName).style.visibility;

        if(actualVisibility=='' || actualVisibility=='visible') {
                document.getElementById(rowName).style.visibility = "hidden";
                document.getElementById(rowName).style.display = "none";
        } else {
                document.getElementById(rowName).style.visibility = "visible";
                document.getElementById(rowName).style.display = ""; /* den display-Wert block hab ich entfernt, da dies in dem einen oder anderen Browser zu Darstellungsproblemen führt, und der Grund dieses Themas war */
        }
}
// ]]>
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 1  </span></td>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 2 </span></td>
    <td width="100%" nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 3 </span></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow1')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow1" name="testrow1" style="visibility:hidden;display:none;">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>x2</td>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow2')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow2" name="testrow2" style="visibility:hidden;display:none;">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>x4</td>
        <td>4</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>


mfg Maik
 
Hallo,

super, besten Dank, hat wunderbar geklappt. Eine Frage noch. Ist es normal, dass er dann beim ein- bzw. ausblenden ganz nach oben auf die Seite springt, oder kann man das auch verhindern?

Tschüß

Brunni
 
Hallo!

Brunni hat gesagt.:
Ist es normal, dass er dann beim ein- bzw. ausblenden ganz nach oben auf die Seite springt.....
Zum Vergrößern anklicken....
Ja. ;)
Brunni hat gesagt.:
.....oder kann man das auch verhindern?
Zum Vergrößern anklicken....
Wo ein Wille, da auch ein Weg. ;)
In dem Du die Links nicht als solche definerst, sondern z.B. einen Text daraus machst.
HTML: 
<span onclick="setVisibility('testrow1')">ein/ausblenden</span>
Damit es aber immernoch (zumindest etwas) nach Links aussieht, kannst Du es z.B. auch so machen:
HTML: 
<span style="text-decoration:underline; cursor:pointer;" onclick="setVisibility('testrow1')">ein/ausblenden</span>

Gruss Dr Dau
 
Moin,
Dr Dau hat gesagt.:
In dem Du die Links nicht als solche definerst, sondern z.B. einen Text daraus machst.
Zum Vergrößern anklicken....
Die Links können als solche bleiben, wie sie definiert wurden :-)

Code: 
<a href="#" onclick="setVisibility('testrow1');return false;">ein/ausblenden</a>

return false verhindert, dass der Browser das Verweisziel im href-Attribut aufruft, das hier einem Anker gleichkommt.

mfg Maik
 
Oder einfach das href-Attribut (welches nur für Links erforderlich ist) samt Verweisziel rausnehmen. :p
HTML: 
<a onclick="setVisibility('testrow1');">ein/ausblenden</a>
Viele Wege führen halt nach Rom. ;)
 
Kann man mehrere <tr>'s mit der gleichen ID gleichzeitig verschwinden/aufklappen lassen?
Geht das auch wenn man den <td>'s eigene CSS Klassen zugewiesen hat?

also ich habe eine Seite wo Kommentare zu Bildern gepostet werden können. Die Kommentare sollen aber erst aufgeklappt werden, wenn jemand auf einen bestimmten Link klickt..

So .. ich habe versucht die Elemente hier aus dem Thread zu übernehmen. Aber er klappt immer nur die erste (leere) Tabellenzeile ein.
Meine Vermutung. Bei klicken des Links sucht er die erste Tabellenzeile mit der ID und klappt die ein/aus.
Die weiteren Zeilen mit der gleichen ID bleiben aber unberührt.

Ist das so korrekt?

Ausschnitt:
PHP: 
			echo "<tr id=\"$bildername\" name=\"$bildername\"><td></td><td></td><td></td><td></td></tr>";
			echo "<tr id=\"$bildername\" name=\"$bildername\"><td>Kommentare: $comments_count </td><td></td><td></td><td></td></tr>";
			while($comments = mysql_fetch_assoc($comments_result)) {
				if ($comments['access'] >= 2) { $access_color = 'table_admin'; }
				else { $access_color = 'table_user'; }
				echo "<tr id=\"$bildername\" name=\"$bildername\"><td class=\"table2\">" . nl2br($comments['kommentar']) ."</td>";
				echo "<td class=\"table2\">" . $comments['datum'] ."</td>";
				echo "<td class=\"$access_color\">" . $comments['user'] ."</td>";
				if ((checkaccess() >= 2) && (!$_GET['delete']) && (!isset($_GET['s']))) { 
					echo "<td class =\"table_delete\"><font class=\"comment_delete\"><a href=index.php?space=home&comments=" . $comments['bild'] . "&delete=" . $comments['id'] . ">X</a></font>";
				}
				if ((checkaccess() >= 2) && ($_GET['delete'] != NULL) && (!isset($_GET['s']))) {
					if ($_GET['delete'] == $comments['id']) {
					echo "<td class =\"table_delete\"><font class=\"comment_delete\"><a href=index.php?space=home&comments=" . $comments['bild'] . "&delete=" . $comments['id'] . "&s>OK</a></font>";
					}
				}
				else { echo "<td>"; }
				echo "</td> </tr> <br>";
			}

ps: ich weiss das der Code nicht ganz optimal ist.. aber bin ja noch Anfänger :)
 
Hi,

ein ID-Bezeichner muß im Dokumentbaum eindeutig sein, d.h. er darf darin nicht mehrmals vergeben werden.

Ansonsten folgt halt das, was du eben beschrieben hast, und der Browser schnappt sich immer nur das erste dieser gleichbenannten Objekte im Markup.

Wenn du mehrere Tabellenzeilen <tr> auf einen Schlag ein- und ausblenden möchtest, bietet sich hier beispielsweise das <tbody>-Element an, um sie darin einzubinden, und stattdessen dann dieses mit dem Script zu manipulieren.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück