✔ td - Elemente aufklappen

W

Watusimann

Erfahrenes Mitglied
Hallo zusammen,

Ich als javascript-nicht-könner sitze nun mehr seit 2 Stunden vor einem Problem, was ich nicht lösen kann. Ich versuche in einer Tabelle alle <tr> Tags die mit der id = ghost versehen sind via Link aufklappen zulassen, jedoch funktioniert nur die erste Zeile.
getElementByClass gibt es so als Funktion im Javascript nicht, ...
Bitte um Hilfe, da ich so langsam verzweifle.
Hier der Code:
HTML: 
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;

function versteckt() 
{ 
	if (angezeigt)
	{
		document.getElementById("ghost").style.display = 'none';
		angezeigt = false;
	}
	else
	{
		document.getElementById("ghost").style.display = '';
		angezeigt = true;
	}
} 

</script>
<table>
<tr>
<th>
<a href="#" onclick="versteckt()">Ein - / Ausblenden</a>
</th>
<th>row head</th>
<th>row head</th>
<th>row head</th>
</tr>

<tr id="ghost" class="foo" style="display:none">
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>

<tr id="ghost" class="foo" style="display:none">
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>

<tr class="foo">
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>

<tr id="bottom">
<th>row bottom</th>
<th>row bottom</th>
<th>row bottom</th>
<th>row bottom</th>
</tr>
</table>

row head und row bottom sollen immer ersichtlich bleiben ...

Da zwischen diesen teilweise mehr als 60 <tr></tr> Tags kommen, ist die Variante

getElementsByTagName("tr")[1].style.display ...
getElementsByTagName("tr")[2].style.display ...
getElementsByTagName("tr")[3].style.display ...

relativ unsauber. Würde aber funktionieren :D
Danke schonmal im Voraus für Eure Hilfe
 
Zuletzt bearbeitet:
Soll denn jedes TR versteckt werden?

Das erste Problem:
Zuerst einmal aber ein Hinweis: eine ID darf Dokumentweit nur genau einmal vergeben sein.

Das zweite Problem:
der <tr>-Tag kennt kein Attribute "name", also kann es auch nicht über document.getElementsByName(name)[x].style.display angesprochen werden.

Falls alle <TR>-Tags auf der Seite ausgeblendet werden sollen, gäbe es folgende Möglichkeit:

Code: 
element = document.getElementsByTagName('tr');
for(var i = 1; i+1 < element.length; i++){
   // wenn ausgeblendet wird wieder eingeblendet und vice versa
    element[i].style.display == 'none' ? element[i].style.display = '' : element[i].style.display = 'none';
}

eine zweite Möglichkeit wäre folgende:
Code: 
//Code-Snippet von 
//http://www.anyexample.com/webdev/javascript/javascript_getelementsbyclass_function.xml
// Diese Funktion liefert ein Array mit allen Elementen, deren 
// class gleich searchClass ist.

function getElementsByClass( searchClass, domNode, tagName) {
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) {
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1)
            el[j++] = tags[i];
    }
    return el;
}


function versteckt(name)
{
element = getElementsByClass(name);

    for( var i = 0; i < element.length; i++ )
        {
            if(element[i].style.display == 'none'){
                element[i].style.display = '';
            } else {
                element[i].style.display = 'none';
            }
        }
}

Wie du siehst muss der Aufruf deiner versteckt() Funktion jetzt einen Namen mit übergeben.

Ich habe deinen Beispielcode wie Folgt abgeändert:
HTML: 
<script type="text/javascript" language="javascript">

function getElementsByClass( searchClass, domNode, tagName) {
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) {
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1)
            el[j++] = tags[i];
    }
    return el;
}


function versteckt(name)
{
element = getElementsByClass(name);

    for( var i = 0; i < element.length; i++ )
        {
            if(element[i].style.display == 'none'){
                element[i].style.display = '';
            } else {
                element[i].style.display = 'none';
            }
        }
}
</script>

<table>
<tr>
<th>
<!--versteckt('foo hide') ist der neue aufruf, steht hier nur 'foo' werden alle Elemente, deren Class 'foo' beinhaltet versteckt. also row 1 bis 3-->
<a href="#" onclick="versteckt('foo hide')">Ein - / Ausblenden</a>
</th>
<th>row head</th>
<th>row head</th>
<th>row head</th>
</tr>

<tr class="foo hide" style="display:none;">
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
</tr>

<tr class="foo hide" style="display:none;">
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>

<tr class="foo">
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>

<tr id="bottom">
<th>row bottom</th>
<th>row bottom</th>
<th>row bottom</th>
<th>row bottom</th>
</tr>
</table>
 
Zuletzt bearbeitet:
Hallo,
man kann das auch schön mittels JQuery (http://jquery.com/) lösen:

HTML: 
<script type="text/javascript" src="scripts/jquery1-2-6.js"></script>
<script type="text/javascript">
function versteckt() {
	var elements = $("tr[id^=ghost]"); // alle tr's, die mit "ghost" beginnen
	for (var j = 0; j < elements.length; j++) {
		var element = elements[j];
		if (element.style.display=='none') {
			element.style.display='';
		} else {
			element.style.display='none';
		}
	}

}
</script>

<table>
	<tr>
		<th>
			<a href="#" onclick="versteckt()">Ein - / Ausblenden</a>
		</th>
		<th>row head</th>
		<th>row head</th>
		<th>row head</th>
	</tr>

	<tr id="ghost1" style="display:none">
		<td>row1</td>
		<td>row1</td>
		<td>row1</td>
		<td>row1</td>
	</tr>

	<tr id="ghost2" style="display:none">
		<td>row2</td>
		<td>row2</td>
		<td>row2</td>
		<td>row2</td>
	</tr>

	<tr id="foo1">
		<td>row3</td>
		<td>row3</td>
		<td>row3</td>
		<td>row3</td>
	</tr>

	<tr id="bottom">
		<th>row bottom</th>
		<th>row bottom</th>
		<th>row bottom</th>
		<th>row bottom</th>
	</tr>
</table>
 
Vielen vielen Dank an Euch beide ...
Die Pseudo-Funktion getElementsByClass() hatte ich auch via google gefunden, konnte aber nicht wirklich damit umgehen.
Funktioniert prima :)

greetz
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück