nicht angemeldet
gruss Markus, hallo Lesende,
document.getElementById('xxx').getElementsByTagName('a');
... der TagName bringt mich nur in keinster weise weiter, da ich ALLE entsprechenden Felder innerhalb von tr Tags habe.
Ich weiß zwar nicht warum es geht aber ich habe es jetzt so gelöst und das klappt: ... ... Ich gebe es als ID an und Frage es über Name ab. Sei es nun konform oder nicht. Es geht.
<q class="altvaeterlich">
das mag Dir jetzt helfen, aber die haltung dahinter zeugt nicht vom
wunsch nach wirklichem verstaendnis der materie.
</q>
schade, dass Du so schnell aufgegeben hast. Struppi haette Dir auf alle faelle weiter beigestanden und Dir haeppchenweise die informationen verabreicht, die Dir bei der erarbeitung einer sauberen loesung von nutzen gewesen waeren.
@alle interessierten:
molily hat seit ende letzten jahrens im und ueber das weblog von SELFHTML in mehreren artikeln das thema JavaScript breit aufgefaechert und meiner meinung nach hinreichen genug ausgeleuchtet. wenn ich mir den von molily gesponnenen roten faden so betrachte, warte ich eigentlich nur noch auf einen direkt an den letzten artikel (saubere namensraeume) anknuepfenden beitrag ueber objektorientiertes programmieren und die vielen moeglichen vererbungsarten in JavaScript. dieser koennte dann auch den vorlaeufigen abschluss des fast ein jahr waehrenden reviews bilden.
ich finde Markus' beispiel steht fuer einen guten mittelwert hinsichlich loesungskomplexitaet und anforderungen an das DOM-Scripting, so wie es heute von der breiten masse an neulingen, fortgeschrittenen und profis betrieben wird.
hat man sich nun im letzten jahr nur durch folgende beitraege von molily gearbeitet ...
- Der sinnvolle Einsatz von JavaScript vom 17.12.2005, - DHTML ist tot vom 01.04.2006, - JavaScript und Webstandards vom 19.04.2006 und - Neuer Artikel: Organisation von JavaScripten vom 25.08.2006 bzw. direkt: - Organisation von JavaScripten
... koennte eine der moeglichen loesungen fuer die vom OP vorgegebene aufgabe so aussehen (viel kommentierter quael-code):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>hide-and-show-table-rows.html</title>
<script type="text/javascript">
/*
das [TableRowController]-Singleton ist eine
sich selbst initialisierende kontrollstruktur
fuer tabellenzwischenueberschriften und deren
zugeordneten tabellenzeilen.
jede tabelle die einem dem beispiel entsprechenden
aufbau folgt, wird von diesem controller erfasst.
dabei bedarf es keiner verrenkungen ueber
html-attribute wie "name", "id" oder "class".
das singleton-muster wurde gewaehlt, um die kapselung
privater und oeffentlicher eigenschaften und methoden
auf genau einem objekt zu gewaehrleisten.
*/
var TableRowController = new function () { /* der new-operator erzeugt im zusammenspiel
mit der ihm folgenden anonymen funktion
ein objekt. die referenz auf diesen
anonymen objekt-konstruktor muss dann
innerhalb desselben maskiert werden.
*/
this.constructor = Object; /* verhindert, dass ein anderes controller-objekt erzeugt
werden kann -
var otherController = new TableRowController.constructor();
fuehrt nicht mehr zum gewuenschten ergebnis.
*/
var isOnDisplay = function (obj) { // private hilfsmethode.
var display = "";
if (document.defaultView && document.defaultView.getComputedStyle) {
display = document.defaultView.getComputedStyle(obj, "").getPropertyValue("display");
} else if (obj.currentStyle) {
display = obj.currentStyle["display"];
}
return ((display == "none") ? (false) : (true));
};
this.toggleRows = function (obj) { /* oeffentliche methode, die zuvor durch den
prozess "TableRowController.initialize"
fuer jeden passenden tabellenheader-knoten
dessem "onclick"-handler zugewiesen wurde;
steuert das aus- und einklappen der zu diesem
header gehoerenden tabellenzeilen.
*/
var i, rows = [], node = obj.parentNode.nextSibling;
while (node) {
if ((node.nodeType == 1) && (node.nodeName.toLowerCase() == "tr")) {
if (node.getElementsByTagName("th").length === 0) {
rows.push(node);
} else {
break;
}
}
node = node.nextSibling;
}
for (i=0; i<rows.length; ++i) {
node = rows[i];
if (isOnDisplay(node)) {
node.style.display = "none";
} else {
node.style.display = ((window.attachEvent && !window.addEventListener) ? ("block") : ("table-row"));
}
}
};
this.initialize = function () { /* oeffentliche methode, die auf den "onload"-
event-handler des browserfensters angemeldet
wurde; parst die DOM-struktur, um fuer die
steuerung passende tabellenheader-knoten
zu finden.
*/
var i, obj, isSubHeader, thCollection = document.getElementsByTagName("th");
for (i = 0; i<thCollection.length; ++i) {
obj = thCollection[i].parentNode;
isSubHeader = true;
while (obj && (obj.nodeName.toLowerCase() != "table")) {
if (obj.nodeName.toLowerCase() == "thead") {
isSubHeader = false;
}
obj = obj.parentNode;
}
if (isSubHeader) {
thCollection[i].onclick = function () {
TableRowController.toggleRows(this);
};
}
}
};
}(); // call-operator; fuehrt den anonymen konstruktor gleich nach dessen initialsierung aus.
if (window.addEventListener) { // initialisierung des controllers anmelden.
window.addEventListener("load", TableRowController.initialize, true);
} else if (window.attachEvent) {
window.attachEvent("onload", TableRowController.initialize);
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
body {
font-size: 80%;
font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
background-color: #fafafa;
color: #000;
}
table {
margin: 10px;
border: 1px solid #000;
border-collapse: collapse;
}
tr, td, th {
padding: 10px;
border: 1px solid #000;
}
tbody th:hover {
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">hide and show table rows</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">sub header 01</th>
</tr>
<tr>
<td>content 01-a-01</td>
<td>content 01-a-02</td>
<td>content 01-a-03</td>
</tr>
<tr>
<td>content 01-b-01</td>
<td>content 01-b-02</td>
<td>content 01-b-03</td>
</tr>
<tr>
<th colspan="3">sub header 02</th>
</tr>
<tr>
<td>content 02-a-01</td>
<td>content 02-a-02</td>
<td>content 02-a-03</td>
</tr>
<tr>
<td>content 02-b-01</td>
<td>content 02-b-02</td>
<td>content 02-b-03</td>
</tr>
<tr>
<td>content 02-c-01</td>
<td>content 02-c-02</td>
<td>content 02-c-03</td>
</tr>
<tr>
<th colspan="3">sub header 03</th>
</tr>
<tr>
<td>content 03-a-01</td>
<td>content 03-a-02</td>
<td>content 03-a-03</td>
</tr>
</tbody>
</table>
</body>
</html>
aehm ... ja. - peterS. - pseliger@gmx.net
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies. Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
Struppi