Tabelle mit Javascript durchlaufen

[amateur]

Hallo zusammen,

ich habe da mal ein kleines Problem. Ich habe eine Tabelle und jeder ihrer Zeilen hat eine fortlaufende ID. Also nach diesem Muster:
<table id="testtabelle">
<tr id="1"><td>skjfskdfk</td></tr>
<tr id="2"><td>kjgkghfhfl</td></tr>
<tr id="3"><td>asdfhjsf</td></tr>
</table>

Jetzt möchte ich via Javascript alle Zeilen dieser Tabelle durchlaufen und jeweils die id auslesen. Hier beginnt nun aber mein Problem.
Wie kann ich denn die Tabelle durchlaufen? Gibt es vielleicht ein Konstrukt nach diesem Prinzip: document.getElementById("testtabelle").id.count ??
Ich weiß einfach nicht, wie ich diese Tabelle durchlaufen soll...

Kann mir da vielleicht jemand den richtigen Denkanstoß geben?

Schon mal vielen Dank!
Frank

[dave]

Hi,

du könntest document.querySelector('#testtabelle tr') verwenden oder document.getElementById('testtabelle').getElementsByTagName('tr').

Falls du Browser unterstützen willst die keine der beiden Varianten unterstützen empfehle ich ein Javascript Framework (z.B. JQuery) zu verwenden.

~dave

[dave]

Korrektur:

du könntest document.querySelector('#testtabelle tr') verwenden

Für deinen Anwendungsfall selbstverständlich .querySelectorAll.

[amateur]

Hallo Dave,

erstmal vielen Dank für deine schnelle Antwort. Leider funktioniert das aber noch nicht wirklich

du könntest document.querySelector('#testtabelle tr') verwenden

Um das Ganze mal zu testen wollte ich mir mal diesen möglichen Zähler ausgeben lassen:

alert (document.querySelector('#testtabelle tr'));

Hier bekomme ich aber nur null zurück. So kann ich ja keine for-schleife füttern :-)

Vielen Dank
Frank

[dave]

Hi,

alert (document.querySelector('#testtabelle tr'));

Hier bekomme ich aber nur null zurück. So kann ich ja keine for-schleife füttern :-)

Dann machst du wohl etwas falsch, bei mir geht's.

~dave

[amateur]

Hi,

alert (document.querySelector('#testtabelle tr'));

Hier bekomme ich aber nur null zurück. So kann ich ja keine for-schleife füttern :-)

Dann machst du wohl etwas falsch, bei mir geht's.

~dave

Hi Dave,

mal wieder vielen Dank! Aber ich glaube, ich habe den Sinn dieser Aktion noch nicht ordentlich darstellen können. Vielleicht mal kurz zum Hintergrund: Ich habe eine recht komplexe Suche und die Ergebnisse dieser Suche werden mir in der beschriebenen Tabelle dargestellt. Mittels Klick auf eine dieser Zeilen gelange ich auf eine Detailseite, die weitere Detailinformationen zu dem Suchergebnis in der angeklickten Zeile liefert. Wenn ich jetzt aber wieder eine Seite zurück springe, möchte ich wieder das Suchergebnis von vorher sehen, also die Suche nicht nochmal ausführen.
Um sichtbar zu machen, von wo ich erst in die Detailseite eingestiegen bin, möchte diese Zeile farblich hervorheben.
Ich habe daher für jede dieser Zeilen eine id definiert, die beim Absprung in die Detailseite mit übergeben wird. Dort wird dieser Wert genommen und als Get-Parameter auf den Back-Button gelegt.
Wenn ich jetzt also wieder auf der Suchseite mit der Tabelle bin, möchte ich nun die Tabelle soweit durchlaufen, bis ich an die Zeile komme, bei der ich in die Detailseite eingestiegen bin und sie farblich markieren.

Ich möchte also nicht sehen, was in den Zeilen steht, sondern um welche id es sich aktuell handelt.

Ich hoffe ich konnte einigermaßen verständlich darstellen, worum es mir bei dieser Aktion geht.

Vielen Dank
Frank

[dave]

Hi,

d.h. du hast eine ID und ein Element mit dieser ID.
Dieses Element würdest du gerne finden damit du deine Style-Anpassungen daran vornehmen kannst.
Warum nimmst du dann nicht einfach document.getElementById(die-dir-bekannte-ID)?

~dave

[amateur]

Hi,

d.h. du hast eine ID und ein Element mit dieser ID.
Dieses Element würdest du gerne finden damit du deine Style-Anpassungen daran vornehmen kannst.
Warum nimmst du dann nicht einfach document.getElementById(die-dir-bekannte-ID)?

~dave

Hi Dave,

ja, manchmal liegt die Lösung auf der Hand und man ist zu blöd, sie zu sehen. Ich habe das jetzt folgendermaßen gelöst:

  
var tabelle = document.getElementById("testtabelle");  
var trs = tabelle.getElementsByTagName("tr");  
		  
for(zeilenzaehler=0;zeilenzaehler<trs.length;zeilenzaehler++)  
{  
    if (trs[zeilenzaehler].id == uebergabe_zeile)  
    {  
	//auszuführender Code  
    }  
}  

Vielen Dank für deine Unterstützung!

Grüße
Frank

[dave]

Hi,

var tabelle = document.getElementById("testtabelle");
var trs = tabelle.getElementsByTagName("tr");

for(zeilenzaehler=0;zeilenzaehler<trs.length;zeilenzaehler++)
{
    if (trs[zeilenzaehler].id == uebergabe_zeile)
    {
//auszuführender Code
    }
}

  
Warum nicht anstelle dieses ganzen Codes einfach document.getElementById(uebergabe\_zeile);?  
  
~dave

[molily]

du könntest document.querySelector('#testtabelle tr') verwenden oder document.getElementById('testtabelle').getElementsByTagName('tr').

Ich halte ein einfaches
tableElement.http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=rows
dagegen.

Falls du Browser unterstützen willst die keine der beiden Varianten unterstützen empfehle ich ein Javascript Framework (z.B. JQuery) zu verwenden.

jQuery unterstützt Browser, die kein getElementsByTagName kennen, ohnehin nicht.
rows bzw. getElementsByTagName kennen alle relevanten Browser der letzten zehn bis zwölf Jahre.

Mathias