Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript

chrisol_76 · #1 (**permalink**) 21.07.2008, 16:08

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>

IChao · #2 (**permalink**) 21.07.2008, 16:47

In konformen Browsern haben Tabellenelemente nicht display-Werte von block oder inline, sondern die in CSS 2.1: 17.2 genannten display-Werte. Die von dir mit block/inline gesetzten Zellen werden zu je einer Zelle zusammengefasst in einem anonymen Tabellenelement untergebracht.

chrisol_76 · #3 (**permalink**) 21.07.2008, 17:37

Vielen Dank,

der Link führte direkt zur Lösung.

Von den display-Werten für Tabellen hatte ich bisher nichts gehört.

Der Internet Explorer 6 gehört nicht zu den konformen Browsern , daher
werde ich ich mir mit einer Browserabfrage behelfen und beim IE6 weiter "block" oder "inline" benutzen und sonst "table-cell"

Ciao,
Chris

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS waagerechte flexible Bildergallerie mit Text ohne Tabellen immer mittig	Bomb-Jack	CSS	4	22.06.2010 13:24
2 Tabellen via CSS unterschiedlich bestimmen	philogyn	CSS	2	21.05.2010 10:33
Problem mit CSS ohne Tabellen	omega2k	CSS	20	19.01.2010 12:11
CSS Tabellen und Barrierefrei	\|SONY\|	CSS	16	01.05.2007 16:43
noch ein Problem mit Tabellen und CSS	Sven4972	CSS	2	08.10.2005 12:50