Spalten ausblenden
Michael
- javascript
Hallo
Ich habe jetzt eine Lösung gefunden mit der ich einzelnen Spalten einer Tabelle ausblenden kann, so wie ich das möchte. Dazu hätte ich 2 Fragen :
1. Geht diese Lösung auch in anderen Browsern ? Ich habe es erfolgreich im IE und Firefox getestet, andere habe ich leider nicht installiert.
2. Ein Schönheitsfehler hat es aber : wenn man eine Checkbox anklickt und anschliesend das Browserfenster aktualisiert (F5) kommt das ganze durcheinander. Die dargestellte Spalte entspricht nicht mehr dem was per Häckchen eingestellt ist.
Gibt es dazu eine Lösung. Etwas das beim aktualisieren auch die voreingestellten Ckeckboxen mit "checked" richtig setzt ?
Und hier der entsprechnde Quelltext :
<html>
<head>
<title>Spalten ausblenden</title>
<script language="javascript">
<!--
function toggle( targetId ){
if (document.getElementById) {
var target = document.getElementById( targetId );
if (target.style.display == "") {
target.style.display = "none" }
else {
target.style.display = "" } }}
-->
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"><tr><td width="100" align="center">
<p> </p>
</td><td width="100" align="center" bgcolor="#FFF0DB">
Birne<br>
<input type="checkbox" onclick="javascript:toggle('01');" checked>
</td><td width="100" align="center" bgcolor="#EEFFDB">
Apfel<br>
<input type="checkbox" onclick="javascript:toggle('02');">
</td></tr></table>
<br>
<table border="0" cellpadding="0" cellspacing="0"><tr><td width="100">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="100"><p> </p></td></tr>
<tr><td width="100"><p>mit Wurm</p></td></tr>
<tr><td width="100"><p>ohne Wurm</p></td></tr>
</table>
</td><td>
<table border="0" cellpadding="0" cellspacing="0" width="400" id="01" style="display: all;">
<tr><td width="400" align="center" bgcolor="#FFF0DB"><p>Birne</p></td></tr>
<tr><td width="400" align="center" bgcolor="#FFF0DB"><p>Ja</p></td></tr>
<tr><td width="400" align="center" bgcolor="#FFF0DB"><p>Ja</p></td></tr>
</table>
</td><td>
<table border="0" cellpadding="0" cellspacing="0" width="400" id="02" style="display: none;">
<tr><td width="400" align="center" bgcolor="#EEFFDB"><p>Apfel</p></td></tr>
<tr><td width="400" align="center" bgcolor="#EEFFDB"><p>Nein</p></td></tr>
<tr><td width="400" align="center" bgcolor="#EEFFDB"><p>Nein</p></td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Könnt Ihr mir helfen ?
Gruß
Michael
Das müsste man doch irgendwie per Javasript machen können das beim neu laden überprüft wird ob eine Checkbox checked sein soll oder nicht ... ?
Hallo,
Das müsste man doch irgendwie per Javasript machen können das beim neu laden überprüft wird ob eine Checkbox checked sein soll oder nicht ... ?
Dazu musst du eine Funktion erstellen, die überprüft, ob die einzelnen Checkboxen aktiviert sind.
also z.B.
if(document.getElementById("deine Checkbox").checked = checked){
funktionDieSonstBeimAktivierenAufgerufenWird();
}
Die Checkfunktion kannst du dann während des Ladens, oder danach ausführen:
Beim laden:
<script type="text/javascript">
deineFunktion();
</script>
Hierbei musst du beachten, dass dieses Script^^ erst nach den entscheidenden Elementen platziert werden darf.
oder danach:
<body onload="deineFunktion()">
mfg. Daniel
Genauso gehts - Danke
Gruß
Michael