Auslesen von Werte in Tabelle

[Shinobiofmoon]

Hallo,

ich brauche unbedingt eure Hilfe mit diesen Teil von Javascript. Und zwar habe ich eine HTML Tabelle und in diese habe ich vier input Elemente mit jeweils der id: a,b,c und d.

Die Tabelle wird unterschiedlich je nach Auswahl befüllt. Nehmen wir an ich wähle den
Kunde A aus: Die Tabelle wird mit 10 Reihen befüllt und in jeder Reihe sind werden die input Felder mit der gleichen ID hinzugefügt.

Wie mache ich es jetzt an geschicktesten und hol mir einfach die a,b,c und d Elemente aus jeder Reihe?

Ohne den unteren Code kriege ich nur die Werte der ersten Reihe. Mit den unteren Code kriege ich ein undefined.

An was liegt es?

for(var i = 0; i < rows.length; i++) {
		
		var e = rows[i].getElementsByTagName("td").getElementByTagName("input");
		
		var a = e.getElementById("a").value;
		var b = e.getElementById("b").value;
		var c = e.getElementById("c").value;
		var d = e.getElementById("d").value;
		
		var ta = a.getElementByTagName("td");
		var tb = b.getElementByTagName("td");
		var tc = c.getElementByTagName("td");
		var td = d.getElementByTagName("td");

Ich hoffe ihr könnt mir helfen. Vielen Dank

 

[SteelWheel]

Grüße Dich - willkommen hier im Forum!

Du sollst eine ID dokumentweit nur einmalig (!) vergeben, wenn Du diese direkt über getElementById ansprechen willst.

Alternativ:
- beim Erstellen die Reihe (TR) als Identifikationsmerkmal mit anhängen (simpler Zähler; aufgrund Deiner for()-Schleife also einfach zu erweitern)
- data-*-Attribut statt id (dann steht Dir getElementById aber so nicht zur Verfügung)
- Attribut "value" der Inputboxen verwenden und je TR die values geschlossen auslesen (Reihenfolge ist ja immer a - d, oder?)

Ich denke, dass Du die Werte durchaus an mehreren Stellen in der richtigen Reihenfolge einhängen kannst - und auch dran kommst. Aber mit der so gezeigten ID geht es nicht.

Grüße.

 

[Shinobiofmoon]

Vielen Dank.

Ich hätte zu den Lösungswegen ein paar Fragen:
Was heißt beim Erstellen? Das Erstellen vom Dokument befindet sich in einer anderen Datei. Wie hänge ich da die TR Reihe an der id rein? Muss ich nach der for schleife machen und setze ich diese mit setAttribute?

 

[Sempervivum]

BTW: getElementByTagName gibt es nicht, nur getElementsByTagName.
Edit: Und ich habe es sicherheitshalber ausprobiert: getElementById() gibt es nur für document. Macht auch Sinn, weil IDs dokumentweit eindeutig sind.

 

[Shinobiofmoon]

Ja getElementById gibt es nur für document. Und jetzt ist meine Frage, wenn ich die Anzahl der Zeilen habe wie bringe ich es dann soweit das ich mir die Spalte "a" hole...und reihenweise die Werte lese?

Ich habe mich schon tot gesucht im Internet, doch nix ähnliches habe ich gefunden (auf Englisch und Deutsch).


Was ich versucht habe:

Nach der for schleife

document.getElementById("a").rows[0].innerHTML;

klappt aber nicht.

 

[SteelWheel]

Nein, nein - trenne Dich mal vom ID-Gedanken! Meine Idee war es, dass Du den table-rows (<tr>) bspw. ein Attribut anhängst - ein einfacher Zähler und hier ist data-* natürlich prima für geeignet. In den table-cells (<td>) bzw. INPUTS müsstest Du dafür die IDs entfernen ODER Du hängst an die jeweilige jetzige ID (a, b, c, d) den gleichen Zähler wie für die table-row!

Ziel war es, dass Du Dir die besagte Table hernimmst, mittels Schleife alle enthaltenen <tr> aufgreifest und je <tr> die INPUTS (diese liegen dann schon in der Reihenfolge a, b, c, d, ...) abgreifst. Das erwähnte data-* (Attribut) identifiziert jeweils den aktuellen <tr> (als "Zähler" eignen sich prima direkte Primärkeys aus der Datenbank, wenn Du darüber bspw. Datensätze aktualisieren willst o. ä.).

Das ist die Theorie. Mit jQuery wäre das gar nicht so kompliziert - mit purem JavaScript ist es bei mir schon deutlich länger her (und gerade bei child, [0] & Co. habe ich mir stets einen abgebrochen). Aber vielleicht hilft Dir das schon weiter ... kleines Muster noch zu obigem:

<table id="mainTbl">
<tr data-id="a123">
  <td><input type="text" placeholder="..." value="a" /></td>
  <td><input type="text" placeholder="..." value="b" /></td>
  <td><input type="text" placeholder="..." value="c" /></td>
  <td><input type="text" placeholder="..." value="d" /></td>
</tr>
<tr data-id="b456">
  [...]
</tr>
</table>

Grob mit jQuery als Fiddle (dieses Mal auch hoffentlich richtig @ Sempervivum): Fiddle (bitte Konsole im Browser öffnen für das Ergebnis)

Das geht vielleicht auch schneller oder bequemer - aber das dürfte Dir vielleicht den geringsten Widerstand liefern bei Deinem Plan. Sogar "hidden field" im <tr> wäre eine Lösung (bläht aber deutlich mehr den Sourde auf) ...

Grüße.

 

[Shinobiofmoon]

Ok danke schon mal. Ich habe gerade im HTML Code gesehen, das ich bereits ein ID habe bei tr. Nun ist es aber so das ich nicht unbedingt a, b, c, d haben möchte. Sondern nur die Werte bei b. Wie hol ich mir jetzt spezifisch alle Werte die bei b sind?

 

[SteelWheel]

In meinem Beispiel? Du erweiterst die zweite .each() um einen Zähler und packst da zu, wenn der Zähler auf 1 steht.

Und: Wenn Du ID schon bei TR verwendest, setzt Du ein data-* (ich liebe diese selfmade-Attribut-Möglichkeit).

EDIT: In Verbindung mit jQuery gäbe es noch nth-child ...