Mik3e
Erfahrenes Mitglied
Hi zusammen,
Hab mal wieder Mühe mit JS (wie ich es hasse
Hab eine Tabelle mit mehreren Zeilen. In jeder zweiten zeile befindet sich wiederum eine Tabelle.
In der führenden Zeile gibt es nun einen Link "ein-ausblenden", der die darunterliegende Zeile (mit der Tabelle) ein- bzw. ausblenden soll (typisches "aufklappen").
Mein Problem:
Ausblenden klappt super aber beim Einblenden zerstört mir das JS die komplette Formatierung. Es dürfte irgendwas mit den Display Eigenschaften "block" und "none" zu tun haben. Habe auch schon mehrere Varianten versucht (zB mit expliziter Definition der Colspan) aber ich kriegs einfach nicht hin.
Ist für einen JS Guru hier (Sven!? sicher nur ein kurzer Hingucker um die Lösung zu finden.
Seht Euch das nachfolgende Beispiel an, dann wirds klarer (die rote Zeile gehört jeweils durch die darüberliegende ausgeblendet).
Demo-File zum Testen:
Ich teste das ganze derzeit mit Firefox... Sollte im IE klarerweise dann auch funktionieren..
Danke Euch im Voraus,
Ciao,
Mike
Hab mal wieder Mühe mit JS (wie ich es hasse
Hab eine Tabelle mit mehreren Zeilen. In jeder zweiten zeile befindet sich wiederum eine Tabelle.
In der führenden Zeile gibt es nun einen Link "ein-ausblenden", der die darunterliegende Zeile (mit der Tabelle) ein- bzw. ausblenden soll (typisches "aufklappen").
Mein Problem:
Ausblenden klappt super aber beim Einblenden zerstört mir das JS die komplette Formatierung. Es dürfte irgendwas mit den Display Eigenschaften "block" und "none" zu tun haben. Habe auch schon mehrere Varianten versucht (zB mit expliziter Definition der Colspan) aber ich kriegs einfach nicht hin.
Ist für einen JS Guru hier (Sven!?
sicher nur ein kurzer Hingucker um die Lösung zu finden.Seht Euch das nachfolgende Beispiel an, dann wirds klarer (die rote Zeile gehört jeweils durch die darüberliegende ausgeblendet).
Demo-File zum Testen:
HTML:
<!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 = "block";
}
}
// ]]>
</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">
<td bgcolor="#FF0000"> </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">
<td bgcolor="#FF0000"> </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>Ich teste das ganze derzeit mit Firefox... Sollte im IE klarerweise dann auch funktionieren..
Danke Euch im Voraus,
Ciao,
Mike
