✔ jQuery <tr> ein- und ausblenden Explorer/Firefox

[NM78]

Ich blicke nicht mehr so richtig durch. Ich versuche mit einem Klick in eine Checkbox mehrere Zeilen einer bestimmten Klasse ein- bzw. auszublenden (wenn das Häkchen gesetzt ist soll eingeblendet werden und anders herum).

Leider verhalten sich anscheinend der IE 8 und der Firefox 3.5 ganz unterschiedlich.

Hier mal ein Beispielcode:

<style type="text/css">
tr.ausgeblendeteZeile{display:none}
</style>

<script type="text/javascript"> 
	/* <![CDATA[ */ 
		$(document).ready(function() {
			$("input#meineCheckbox").click(function(){						
				if($(this).is(":checked") == "true" || $(this).is(":checked") == "1") $("tr.ausgeblendeteZeile").fadeIn("slow");						
				else $("tr.ausgeblendeteZeile").fadeOut("slow"); 						
			});
		}); 
	/* ]]> */ 
</script>

<table>
<tr>
<td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Spalte 2</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

Und genau dieses fadeIn klappt nur im Firefox. Im IE passiert garnichts. Dann habe ich mir gedacht, ändere ich eben die css Eigenschaften und habe anstatt fadeIn einfach css("display","inline") verwendet. Das klappt auch prima im IE, allerdings nicht mehr im Firefox (er zeigt dann zwar die Zeilen, behält aber nicht die korrekten Spaltenbreiten bei).

fadeOut funktioniert dann seltsamerweise wieder in beiden Browsern korrekt.

Habt Ihr eine Idee wie man das am besten anstellt?

Dieses is(":checked") verhält sich übrigens auch je nach Browser unterschiedlich. Im IE wird nur "true" zurück gegeben im Firefox dagegen nur "1"...

 

[Sven Mintel]

Moin,

versuche es mal mit

css("display","")

zu dem :checked

So sollte es gleich gehen in allen Browsern:

if($(this).is(":checked"))

 

[NM78]

Vielen Dank für die schnelle Antwort!

Nur

if($(this).is(":checked"))

funktioniert schon mal prima.

Leider bewirkt

$("tr.ausgeblendeteZeile").css("display","");

nichts. An der Stelle möchte ich ja die Zeilen mit der Klasse "ausgeblendeteZeile" ja auch einblenden. Das geht im Firefox mit fadeIn("slow") und im IE mit css("display","inline"), aber leider nicht in beiden Browsern gleichzeitig.

Ich suche eine Variante für beide Browser.

Es geht mit

css("display","table-row")

Leider gibt es dann nicht mehr so eine schöne Animation wie bei fadeIn.

Und wieso klappt fadeOut mit Animation aber fadeIn nicht. Das verstehe ich nicht.

Gibts noch eine Variante mit Animation (slideUp und slideDown klappt ja auch nicht)?

 

[Sven Mintel]

Habs mal probiert, wenn du das ganze über die Zellen selbst machst, gehts in beiden gleichermaßen:

<style type="text/css">
tr.ausgeblendeteZeile td{display:none}
</style>
<script type="text/javascript"> 

		$(document).ready(function() {
			$("input#meineCheckbox").click(function(){						
				if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");						
				else $("tr.ausgeblendeteZeile td").fadeOut("slow"); 						
			});
		}); 

</script>

 

[NM78]

Ja das blendet bei beiden die Zeilen ein. Allerdings im IE nur immer die 1. Spalte. Alle anderen Spalten werden leider nicht mit eingeblendet. Im Firefox werden alle Spalten mit eingeblendet.

 

[Sven Mintel]

In meinem IE8 wird alles eingeblendet...welche jQuery-Verion hast du denn eingebunden?

 

[NM78]

Müsste eigentlich aktuell sein:

jQuery v1.3.2
jQuery UI 1.7.2

Kompletter Testcode:

<style type="text/css">
tr.ausgeblendeteZeile td{display:none}
</style>
<script type="text/javascript"> 

		$(document).ready(function() {
			$("input#meineCheckbox").click(function(){						
				if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");						
				else $("tr.ausgeblendeteZeile td").fadeOut("slow"); 						
			});
		}); 

</script>

<table>
<tr>
<td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Spalte 2</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

Hab Win7RC mit IE 8.0.7 am laufen.

 

[Sven Mintel]

Geht bei mir wie gesagt problemlos:
YouTube Video


Oder meinst du etwas anderes?

 

[NM78]

Es liegt an den von mir gesendeten Headern:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hier mal der komplette Quellcode, wobei die jQuery Bibliothek in Unterordner "js" liegt:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
<head xml:lang="de" lang="de">
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<style type="text/css">
tr.ausgeblendeteZeile td{display:none;background:#CCC;}
</style>
<script type="text/javascript"> 

		$(document).ready(function() {
			$("input#meineCheckbox").click(function(){						
				if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");						
				else $("tr.ausgeblendeteZeile td").fadeOut("slow"); 						
			});
		}); 

</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Setzen Sie ein Häkchen um die anderen Zeilen einzubenden.</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr class="ausgeblendeteZeile">
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>
</body>
</html>

Wenn ich die dtd nicht mitsende, schaltet der Browser automatisch in den alten Quirks Modus, oder? Dann muss irgendwas an diesem Dokument hier nicht XHTML 1.0 konform sein. Hast Du eine Idee?

PS: Vielen Dank für die wahnsinnig tolle Unterstützung hier!

EDIT: Ich habe es bei Validome getestet (auch XML) und bekomme keine Fehler angezeigt.

 

[Maik]

Wenn ich die dtd nicht mitsende, schaltet der Browser automatisch in den alten Quirks Modus, oder? Dann muss irgendwas an diesem Dokument hier nicht XHTML 1.0 konform sein. Hast Du eine Idee?

Ohne Dokumenttyp-Definition (DTD) wird das Dokument weiterhin im standardkonformen Modus übergeben, und der W3C-Validator lässt das Markup als valides "XHTML 1.0 Transitional" passieren.

mfg Maik