| von schreier |
jo det isses.
jetzt kann jede <tr> mit einem class bezeichnet werden und gemeinsam ein- bzw. ausgeblendet werde.
also danke, danke, danke
---
-------------------------------------------------------------
MfG Jürgen |
| von c3o |
So, das waren jetzt ein Stündlein Arbeit, aber auch nur weil ich davon bisher wenig Ahnung hatte - über das DOM dazuzulernen schadet nie 
Hier ein einfaches generelles Script zum:
* ändern der Klasse aller Tags X von Y zu Z und zurück (also zB bei alle Tabellenzeilen
die die Klasse 'sichtbar' haben, wird sie zu 'unsichtbar' geändert)
* ändern des Texts des Änderungslinks je nach aktuellem Status (der Link soll nachher
"ausblenden" heißen, nicht mehr "einblenden")
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16: |
function aendern(welchertag, class1, class2, linkgeklickt, linknormal, thus) {
var rows = document.getElementsByTagName(welchertag);
for(var i=0; i<rows.length; i++) {
if (rows[i].className==class1) {
rows[i].className=class2;
thus.innerHTML = linkgeklickt;
} else {
if (rows[i].className==class2) {
rows[i].className=class1;
thus.innerHTML = linknormal;
}
}
}
}
|
Aufgerufen wirds so:
1:
2:
3: |
<a href="#" onclick="aendern('tagname', 'alteklasse', 'neueklasse', 'neuerlink', 'alterlink', this)">
|
wobei
tagname = Tag, dessen Attribute geändert werden sollen, zB tr
alteklasse = jetzige, zu ersetzende Klasse, zB sichtbar
neueklasse = neue Klasse, zb unsichtbar
neuerlink = wie der Link dann heißen soll, zB wieder einblenden
alterlink = wie der Link jetzt heißt, zB ausblenden
this = genau so lassen, keine Anführungszeichen drum!
Beispiel:
http://c3o.org/test/dom/changeclass.html
Anmerkung:
Läuft natürlich nur auf DOM-kompatiblen, aktuellen Browsern. Getestet auf IE5/win, als Dokumentation das Mozilla-Manual verwendet, also IE5+ und Moz/N6+ sollten keine Probleme haben.
N4 kannst vergessen.
[ Diese Nachricht wurde geändert von: c3o am 2002-09-07 10:54 ] |
| von schreier |
danke für den code, leider wird hier auch nur auf eine id bezogen und man kann nicht ein class benennen bzw. ändern.
zu deleteRow() und insertRow() habe ich leider nichts gefunden.
wenn man hier eine lösung finden könnte, wäre es möglich an verschiedenen stellen einen text ein- bzw. auszublenden ohne viele verschiedene id´s zu vergeben. |
| von Thomas |
Geht aber einfacher.
Ich hab mal kurz was gebastelt - > dürfte für sich selbst sprechen
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53: |
<html>
<head>
<script type="text/javascript">
<!--
var isVisible = false;
function hide(){
if (isVisible == false) {
document.getElementById("tommes1").style.visibility='visible';
isVisible = true;
}
else {
document.getElementById("tommes1").style.visibility='hidden';
isVisible = false;
}
}
//-->
</script>
<style type="text/css">
<!--
.display {
font-family: Arial, Helvetica, sans-serif;
visibility: hidden;
}
-->
</style>
</head>
<body>
<p>Hallo, dies ist ein Text mit <a href="#" onClick="hide()">Display Schalter</a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Überschrift</td>
<td>Überschrift</td>
<td>Überschrift</td>
</tr>
</table>
<table id="t1" class="display" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Zeile 1</td>
<td>Zeile 1</td>
<td>Zeile 1</td>
</tr>
<tr>
<td>Zeile 2</td>
<td>Zeile 2</td>
<td>Zeile 2</td>
</tr>
</table>
</body>
</html>
|
Soo sauber ist das aber auch nicht. Besser wäre du wüdest mit deleteRow() eine Zeile immer löschen und mit insertRow() anzeigen (hab ich aber noch net ausprobiert). Poste mal deinen Code. Tät mich interessieren, wie's bei dir aussieht.
Friendly Greets,
Tommes
|
| von schreier |
leider muss man bei deinem vorschlag jeder tablerow eine eigene id zuweisen, und dies wollte ich vermeiden.
---------
<table>
<tr>
<td><a href="javascript:ausblenden();">ausblenden</a></td>
</tr>
<tr class="disblock">
<td>blaschwaller</td>
</tr>
<tr class="disblock">
<td>blaschwaller</td>
</tr>
<tr class="disblock">
<td>blaschwaller</td>
</tr>
</table>
-----------
was muss nun in der javascript function "ausblenden()" stehen, damit die class disblock auf disnone geändert wird und dann die drei <tr> gemeinsam ausgeblendet werden?
|
|
