[HaBo]

easteregg · 08.02.09, 19:50

heyho

ich hab folgendes konstrukt in meinem html dokument

Code:

<table>
    <tr>
        <td class="collum01 testklasse"></td>
        <td class="collum02"></td>
        <td class="collum03"></td>
        <td class="collum04"></td>
    </tr>
    <tr>
        <td class="collum01"></td>
        <td class="collum02"></td>
        <td class="collum03"></td>
        <td class="collum04"></td>
    </tr>
    <tr>
        <td class="collum01"></td>
        <td class="collum02"></td>
        <td class="collum03"></td>
        <td class="collum04"></td>
    </tr>
    <tr>
        <td class="collum01 testklasse"></td>
        <td class="collum02"></td>
        <td class="collum03"></td>
        <td class="collum04"></td>
    </tr>
</table>

mein ziel war es jetzt, die table rows komplett auszublenden, welche mit dem ersten child die testklasse als class gesetzt haben.
mein plan war ja, das komplett über css zu gestalten, nur leider gibts kein child:parent selector.
daher wollte ich versuchen das mit js umzusetzen, nur bin ich mit js noch recht ungeschickt.

bisher hatte ich das zusammen gebaut:

Code:

    var tr = document.getElementsByTagName("tr"); 
    var re = new RegExp('\\b' + "testklasse" + '\\b');

    for (var i = 0; i < tr.length; i++) { 
        if(re.test(tr[i].firstChild.className)) tr[i].style.visibility = "collapse";
    }

allerdings bekomm für für links tr[i].firstChild.className immer undefined.
sieht da jemand den fehler?

404 · 08.02.09, 20:04

Warum das Rad ständig neu erfinden? Verwende doch eins der unzähligen Javascript Frameworks. Diese bieten Dir sehr praktische CSS-Selectors, mit denen Du Elemente direkt per CSS Klasse selektieren kannst.

In Mootools wäre dass nur eine Zeile:

Code:

$$('.testklasse').setStyle('visibility','collapse');

Anzeige

- Anzeige -

easteregg · 08.02.09, 23:07

hm zugegeben, es ist sinlos komplexere geschichten andauernd neu zu schreiben. aber ich brauch nur diese eine funktion und dafür ne komplette lib einzubinden die dann selbst komprimiert mit 30-50 kb zu buche schlägt find ich etwas übertrieben.

und da es ja scheinbar diese firstChild property gibt, müsste das ja relativ einfach zu lösen sein.
also zwar danke für deinen hinweis, dass man das mit mootools so machen kann (das hat für mich verwendung in nem anderen zusammen hang wo ich mootools ohnehin schon einsetz) aber hierfür halte ich das ganze doch etwas übertrieben.

BasicAvid · 09.02.09, 00:34

Code:

function hiddenRow(cssClass) {
		var rows = document.getElementsByTagName('tr');
		var regEx = eval("/\\b" + cssClass + "\\b/i");
		for (var i = 0; i < rows.length; i++) {
			if (rows[i].tagName != 'TR')
				continue;
				
			var childs = rows[i].childNodes;			
			for (var j = 0; j < childs.length; j++) {				
				if (childs[j].tagName == 'TD') {
					if (childs[j].className.search(regEx) != -1) {
						if (rows[i].style.visibility == 'collapse') {
							rows[i].style.visibility = 'visible';
						} else {
							rows[i].style.visibility = 'collapse';
						}
					}
				}					
			}
		}
	}

Hier mal ein Beispiel-Code, der Funktion musst Du nur den Klassennamen übergeben. Der Code blendet dann die Row ein oder aus, je nachdem, in welchem Zustand sich die Row befindet.

Ach ja, Du kannst Dich nicht drauf verlassen, dass das erste Child gleich die gewünschte Zelle ist. Deshalb auch die zweite Schleife. Mit einem Framework wie z.B. script.aculo.us ging das ganze in einer Zeile. Aber hierfür wäre ein Framework übertrieben.

easteregg · 09.02.09, 00:54

genial, ich danke dir recht herzlich, das funktioniert einwandfrei

Anzeige

- Anzeige -

08.02.09, 19:50	#1 (permalink)
easteregg Member of Honour Registriert seit: 14.09.07 Likes: 62	child -> parent problematik Anzeige heyho ich hab folgendes konstrukt in meinem html dokument Code: <table> <tr> <td class="collum01 testklasse"></td> <td class="collum02"></td> <td class="collum03"></td> <td class="collum04"></td> </tr> <tr> <td class="collum01"></td> <td class="collum02"></td> <td class="collum03"></td> <td class="collum04"></td> </tr> <tr> <td class="collum01"></td> <td class="collum02"></td> <td class="collum03"></td> <td class="collum04"></td> </tr> <tr> <td class="collum01 testklasse"></td> <td class="collum02"></td> <td class="collum03"></td> <td class="collum04"></td> </tr> </table> mein ziel war es jetzt, die table rows komplett auszublenden, welche mit dem ersten child die testklasse als class gesetzt haben. mein plan war ja, das komplett über css zu gestalten, nur leider gibts kein child:parent selector. daher wollte ich versuchen das mit js umzusetzen, nur bin ich mit js noch recht ungeschickt. bisher hatte ich das zusammen gebaut: Code: var tr = document.getElementsByTagName("tr"); var re = new RegExp('\\b' + "testklasse" + '\\b'); for (var i = 0; i < tr.length; i++) { if(re.test(tr[i].firstChild.className)) tr[i].style.visibility = "collapse"; } allerdings bekomm für für links tr[i].firstChild.className immer undefined. sieht da jemand den fehler? __________________ » Flattr mich! - Wenn dir mein Beitrag geholfen hat! « <\| 2 AMD Opterons 2384@ 8x3,2ghz \| Tyan S2915 \| 10GB \| 2x 8800GT \| 8400GS \| Dell 3008WFP + 2x2007FP \|>

08.02.09, 20:04	#2 (permalink)
404 Registriert seit: 28.11.04 Likes: 0	Warum das Rad ständig neu erfinden? Verwende doch eins der unzähligen Javascript Frameworks. Diese bieten Dir sehr praktische CSS-Selectors, mit denen Du Elemente direkt per CSS Klasse selektieren kannst. In Mootools wäre dass nur eine Zeile: Code: $$('.testklasse').setStyle('visibility','collapse'); __________________ Major Fault, General Error and Colonel Panic came together to celebrate timeout. ------------------------------------------------ http://www.shick.de/ ------------------------------------------------

08.02.09, 23:07	#3 (permalink)
easteregg Member of Honour Themenstarter Registriert seit: 14.09.07 Likes: 62	hm zugegeben, es ist sinlos komplexere geschichten andauernd neu zu schreiben. aber ich brauch nur diese eine funktion und dafür ne komplette lib einzubinden die dann selbst komprimiert mit 30-50 kb zu buche schlägt find ich etwas übertrieben. und da es ja scheinbar diese firstChild property gibt, müsste das ja relativ einfach zu lösen sein. also zwar danke für deinen hinweis, dass man das mit mootools so machen kann (das hat für mich verwendung in nem anderen zusammen hang wo ich mootools ohnehin schon einsetz) aber hierfür halte ich das ganze doch etwas übertrieben. __________________ » Flattr mich! - Wenn dir mein Beitrag geholfen hat! « <\| 2 AMD Opterons 2384@ 8x3,2ghz \| Tyan S2915 \| 10GB \| 2x 8800GT \| 8400GS \| Dell 3008WFP + 2x2007FP \|>

09.02.09, 00:34	#4 (permalink)
BasicAvid Registriert seit: 17.03.04 Likes: 2	Code: function hiddenRow(cssClass) { var rows = document.getElementsByTagName('tr'); var regEx = eval("/\\b" + cssClass + "\\b/i"); for (var i = 0; i < rows.length; i++) { if (rows[i].tagName != 'TR') continue; var childs = rows[i].childNodes; for (var j = 0; j < childs.length; j++) { if (childs[j].tagName == 'TD') { if (childs[j].className.search(regEx) != -1) { if (rows[i].style.visibility == 'collapse') { rows[i].style.visibility = 'visible'; } else { rows[i].style.visibility = 'collapse'; } } } } } } Hier mal ein Beispiel-Code, der Funktion musst Du nur den Klassennamen übergeben. Der Code blendet dann die Row ein oder aus, je nachdem, in welchem Zustand sich die Row befindet. Ach ja, Du kannst Dich nicht drauf verlassen, dass das erste Child gleich die gewünschte Zelle ist. Deshalb auch die zweite Schleife. Mit einem Framework wie z.B. script.aculo.us ging das ganze in einer Zeile. Aber hierfür wäre ein Framework übertrieben. __________________ Mfg Basic Avid - Use it or be used! -

09.02.09, 00:54	#5 (permalink)
easteregg Member of Honour Themenstarter Registriert seit: 14.09.07 Likes: 62	genial, ich danke dir recht herzlich, das funktioniert einwandfrei __________________ » Flattr mich! - Wenn dir mein Beitrag geholfen hat! « <\| 2 AMD Opterons 2384@ 8x3,2ghz \| Tyan S2915 \| 10GB \| 2x 8800GT \| 8400GS \| Dell 3008WFP + 2x2007FP \|>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
MySQL parent path - children mit Anzahl deren children aus anderer Tabelle abrufen	Friedrich	Code Kitchen	2	27.07.08 22:20
Prozess(bzw Child) beenden...	PeaceTreaty	Code Kitchen	0	07.05.02 10:57

[HaBo]

child -> parent problematik