Hallo zusammen,
in dem HTML-Code ganz unten möchte ich gerne mehrere Spalten ein und ausblenden.
Momentan sieht es so aus als würde es mit dem Internet Explorer 6
funktionieren, aber mit Opera und Firefox habe ich ein paar Probleme.
Durch drücken auf den Button "toggle" werden ein paar Spalten via CSS und JavaScript ein-/ausgeblendet.
Zusammenfassung JavaScript für Mozilla und Opera
ausblenden
Code:
document.styleSheets[0].cssRules[0].style.setProperty("display", "none", "");
einblenden inline
Code:
document.styleSheets[0].cssRules[0].style.setProperty("display", "inline", "");
1. Problem :
betrifft Opera und Mozilla
Die Spalten "block1" und "block2" und die Spalten "inline1" und "inline2" werden zusammengefasst
2. Problem :
betrifft Mozilla
durch mehrmaliges drücken des Buttons (ein-/ausblenden der Spalte) verschiebt sich alles rechts neben der ein/ausgeblendeten Spalte nach rechts
Was mache ich falsch?
Kann mir jemand weiterhelfen?
Chris
Hier ist der HTML-Code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test Tabelle</title>
<style>
.MyColumn1
{
color : blue;
display : block;
}
.MyColumn2
{
color : red;
display : block;
}
.MyColumn3
{
color : red;
display : inline;
}
.MyColumn4
{
color : red;
display : inline;
}
</style>
<script type="text/javascript" language="javascript">
function GetRule(AStyleSheetIndex, ARuleIndex)
{// keine Ueberpruefung ob Stylesheet oder Regel existieren
var oStyleSheets = document.styleSheets;
var oStyleSheet = oStyleSheets[AStyleSheetIndex];
var oRules;
var oRule;
if (oStyleSheet.cssRules)
{
return oStyleSheet.cssRules[ARuleIndex];
}
else if (oStyleSheet.rules)
{
return oStyleSheet.rules[ARuleIndex];
}
return null;
}
function GetAttribute(AStyleSheetIndex, ARuleIndex, AAttribute)
{
var oRule = GetRule(AStyleSheetIndex, ARuleIndex);
if (oRule == null)
return "";
if (oRule.style.getPropertyValue)
{
return oRule.style.getPropertyValue(AAttribute);
}
else
{
return oRule.style[AAttribute];
}
}
function SetAttribute(AStyleSheetIndex, ARuleIndex, AAttribute, AValue)
{
var oRule = GetRule(AStyleSheetIndex, ARuleIndex);
if (oRule == null)
return;
if (oRule.style.setProperty)
{
oRule.style.setProperty(AAttribute, AValue, "");
}
else
{
oRule.style[AAttribute] = AValue;
}
}
function Toggle_Column()
{
var strValue;
var strAttribute;
var iRuleIndex;
strAttribute = "display";
iRuleIndex = 0;
strValue = GetAttribute(0, iRuleIndex, strAttribute);
if ((strValue == null) || (strValue == "block"))
{
strValue = "none";
}
else
{
strValue = "block"; // "inline";
}
SetAttribute(0, 0, strAttribute, strValue);
// ************************************************************************************
strAttribute = "display";
iRuleIndex = 1;
strValue = GetAttribute(0, iRuleIndex, strAttribute);
if ((strValue == null) || (strValue == "block"))
{
strValue = "none";
}
else
{
strValue = "block"; // "inline";
}
SetAttribute(0, iRuleIndex, strAttribute, strValue);
// ************************************************************************************
strAttribute = "display";
iRuleIndex = 2;
strValue = GetAttribute(0, iRuleIndex, strAttribute);
if ((strValue == null) || (strValue == "inline"))
{
strValue = "none";
}
else
{
strValue = "inline"; // "inline";
}
SetAttribute(0, iRuleIndex, strAttribute, strValue);
// ************************************************************************************
strAttribute = "display";
iRuleIndex = 3;
strValue = GetAttribute(0, iRuleIndex, strAttribute);
if ((strValue == null) || (strValue == "inline"))
{
strValue = "none";
}
else
{
strValue = "inline"; // "inline";
}
SetAttribute(0, iRuleIndex, strAttribute, strValue);
}
</script>
</head>
<body>
<table>
<thead>
<tr id="row0">
<th>00</th>
<th class="MyColumn1">block1</th>
<th class="MyColumn2">block2</th>
<th>03</th>
<th class="MyColumn3">inline1</th>
<th class="MyColumn4">inline2</th>
<th>06</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<th>10</th>
<td class="MyColumn1">11</td>
<td class="MyColumn2">12</td>
<td>13</td>
<td class="MyColumn3">14</td>
<td class="MyColumn4">15</td>
<td>16</td>
</tr>
<tr id="row2">
<th>20</th>
<td class="MyColumn1">21</td>
<td class="MyColumn2">22</td>
<td>23</td>
<td class="MyColumn3">24</td>
<td class="MyColumn4">25</td>
<td>26</td>
</tr>
</tbody>
</table>
<form name="frmTest">
<input type="button" value="toggle" onclick="Toggle_Column();">
</form>
getestet mit folgenden Browsern unter Windows XP SP2
<ul>
<li>IE 6.0 (6.0.2900.2180)</li>
<li>Mozilla Firefox 2.16 (Problem1 und Problem2)</li>
<li>Opera 9.23 (Problem1)</li>
<li>Amaya 10.0.1 (ohne JavaScript)</li>
</ul>
<ul>
<li>1. Problem : <br>betrifft Opera und Mozilla
<br>die Spalten "block1" und "block2" und die Spalten "inline1" und "inline2" werden zusammengefasst
</li>
<li>2. Problem : <br>betrifft Mozilla
<br>durch mehrmaliges drücken des Buttons (ein-⁄ausblenden der Spalte) verschiebt alles rechts neben der ein⁄-ausgeblendeten Spalte nach rechts
</li>
</ul>
</body>
</html>