Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 21.07.2008, 17:08
chrisol_76 chrisol_76 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2008
Beiträge: 2
chrisol_76 befindet sich auf einem aufstrebenden Ast
Standard Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript

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&uuml;cken des Buttons (ein-&frasl;ausblenden der Spalte) verschiebt alles rechts neben der ein&frasl;-ausgeblendeten Spalte nach rechts
		</li>
	</ul>

</body>
</html>
Mit Zitat antworten
Sponsored Links