Tabelle - Element mit Klasse in der Tabelle suchen

C

Calvinstefan

New member
Hallo,

hoffentlich könnt ihr mir bei folgender Fragestellung eine Lösung geben. Ich bastele nun schon Stunden daran herum ... ohne Erfolg:

Ich habe eine Tabelle mit ... sagen wir ... drei Zeilen:

<tr>
<td>
<div>
<input name="START1">
</div>
</td>
<td>
<div>
<input name="ELEMENT2">
</div>
</td>
<td>
<a>
<class="remove">
</a>
</td>
</tr>

Ich möchte nun ausgehend vom Input-Feld "START1" als Selektor das a-Element der dritten Spalte klicken.
Klicken ist klar: .click();
Mein Problem ist die Selektion des a-Elementes.

Ich darf nur reines Javascript (also kein jQuery) verwenden.
Die Selektion des a-Elementes mit dem darauf auszuführenden Klick soll nicht über eine Schleife über die Elemente erfolgen, sondern durch einen "Einzeiler".

Ist das überhaupt möglich?

Also mit .closest('tr') komme ich ja schon mal in die Ebene, von der aus jetzt nach Oben gehend nach dem a-Element mit der Klasse "remove" gesucht werden müsste.
Diesen zusammengesetzten Selektor bekomme ich nicht gebastelt.
Jemand von Euch?

Danke!


Gruß,
Stefan.
 
mikdoe

mikdoe

Administrator
HTML: 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Test</title>
	</head>

	<body>

		<div>
			<table>
				<tr>
					<td>
						<div><input name="START1"></div>
					</td>

					<td>
						<div><input name="ELEMENT2"></div>
					</td>

					<td>
						<a class="remove" href="https://www.google.de" target="_blank">Testschrift</a>
					</td>
				</tr>
			</table>
		</div>

		<input type="button" value="Los" id="ausloeser">

		<script>
			document.getElementById('ausloeser').onclick = function() {
				document
					.querySelector("input[name='START1']")	// <input...
					.parentNode				// <div...
					.parentNode				// <td...
					.parentNode				// <tr...
					.children.item(2)			// das dritte sibling im DOM abwärts <td...
					.style.border = '1px solid red'		// Beispiel, weil .click() nicht auf <a... anwendbar ist
				;
			};
		</script>
	</body>
</html>
 
C

Calvinstefan

New member
Hallo,

vielen Dank für Deine Antwort. Doch der Teil mit "children.item(2)" entspricht ja einer direkten Adressierung, wie Du schon schreibst, nämlich auf das dritte Kindelement. Eine solche direkte Adressierung kann ich nicht benutzen, da ich den Code über mehrere Tabellen hinweg nutzen möchte, deren Aufbau durchaus unterschiedlich ist. Deshalb wollte ich auf das a-Element mit der Klasse "remove" selektieren. Nur auf diese Art lande ich in jeder Tabelle auf dem korrekten Element.
Ist eine solche Selektion also mit einem "Einzeiler" nicht möglich? Kann ich nur per Schleife über alle Unterelemente des <tr> laufen und wenn es dann das a mit Klasse "remove" ist meinen Code darauf ausführen?

Gruß,
Stefan.

- - - Aktualisiert - - -

So, hab es endlich gelöst bekommen:

Ausgangselement.closest('tr').querySelectorAll('a.remove')[0].click();

Gruß,
Stefan.
 
Zuletzt bearbeitet:
mikdoe

mikdoe

Administrator
Tatsächlich! Sehr gut!

Den Fehler in meinem Code finde ich leider nicht.
.style.border = '1px solid red' funktioniert, ich müsste also eigentlich in der richtigen Node sein aber .click() macht nichts, nicht mal eine Fehlermeldung.
Na ja man muss nicht alles verstehen. :mad:
 
D

daniel220786

New member
So ganz verstehe ich das auch nicht.
Ich verstehe das so wie es @mikdoe es schon gezeigt hast , auser das er nicht das .remove direkt anspricht.
Denke das es dann so sein soll ?
Code: 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Test</title>
	</head>

	<body>

		<div>
			<table>
				<tr>
					<td>
						<div><input name="START1"></div>
					</td>

					<td>
						<div><input name="ELEMENT2"></div>
					</td>

					<td>
						<a class="remove" href="https://www.google.de" target="_blank">Testschrift</a>
					</td>
				</tr>
			</table>
		</div>

		<script>
	document.querySelector("input[name='START1']").addEventListener('click',function() {
		this.parentNode.parentNode.parentNode.querySelector('.remove').style.border='1px solid red';
	})
		</script>
	</body>
</html>

Hast du mal überlegt das mit Id's zu machen ?
Dann ersparst du dir den kram mit den parentNode usw
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben