zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.07.2008, 16:08
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
  #2 (permalink)  
Alt 21.07.2008, 16:47
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (21.07.2008 um 16:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.07.2008, 17:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2008
Beiträge: 2
chrisol_76 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:44 Uhr.