child -> parent problematik

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.firstChild.className immer undefined.
sieht da jemand den fehler?
 
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');
 
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.
 
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.
 
Zurück
Oben