addEventListener parameter hinzufügen

[loki22]

Hi,

in meiner CherryPy HTML-Template arbeite ich mit JSON Struktur (mehrere Projekte), hier ein Beispiel:

HTML:

Code: Alles auswählen

% for projekt in jsondata:
	<tr>
		<td id="projektdaten${projekt}" value="${projekt}">Projekt ID: ${projekt}</th>
		<td >Projekt Nummer: ${jsondata[projekt]["Nummer"]}</td>
		<td>Projekt Bezeichnung: ${jsondata[projekt]["Bezeichnung"]}</td>
	</tr>
% endfor

SCRIPT:

Code: Alles auswählen

window.addEventListener("load", start, false);
function start (value) {
   var Element = document.getElementById("projektdaten"+value);
   Element.addEventListener("mouseover", funktion1, false);
function funktion1 () {
   alert("test")
}

Ich möchte, dass wenn ich mit der Maus auf der jeweiligen Zeile zeige, dass die Funktion "funktion1" ausgeführt wird. Jedoch weiß ich nicht, wie ich zb. die eigentliche Projekt ID von JSON mit übergebe. Ich habe es getestet wenn ich im Script folgendes umschreibe:

Code: Alles auswählen

...
   var Element = document.getElementById("projektdaten2");
...

und anschließend auf die zweite Zeile drauf gehe, dann wird die Funktion ausgeführt. Jedoch möchte ich das für alle haben, sprich mit einer variable ${projekt}.

Es können auch andere Lösungen, die zum gleichen Ergebnis führen, auch gerne vorgeschlagen werden.

vielen Dank i.V.

[Sirius3]

@loki22: HTML5 sieht für Daten das data-[xyz]-Attribut vor, das man in jedes HTML-Element einfügen kann. Was Du genau vorhast, wird mir aber aus Deinem Post nicht klar.

[BlackJack]

@loki22: ``<td>``-Elemente haben kein `value`-Attribut. Da möchtest Du vielleicht ein `data-*`-Attribut für verwenden.

Code: Alles auswählen

<td id="projektdaten${projekt}" data-project-id="${projekt}">Projekt ID: ${projekt}</th>

Du könntest direkt bei dem Element ein `onmouseover`-Attribut erstellen.

Code: Alles auswählen

<td id="projektdaten${projekt}" data-project-id="${projekt}" onmouseover="funktion1(${projekt})">Projekt ID: ${projekt}</th>

Oder beispielsweise der Zelle eine CSS-Klasse verpassen anhand derer man sich dann per Skript diese Zellen alle geben lassen kann und dann einen Listener bei den einzelnen Zellen hinzufügen kann.

Code: Alles auswählen

<td id="projektdaten${projekt}" class="project-id-cell" data-project-id="${projekt}">Projekt ID: ${projekt}</th>

Und dazu dann die `start()`-Funktion die die Listener setzt (ungetestet):
[Codebox=javascript file=Unbenannt.js]start = function () {
var cells = document.querySelectorAll('.project-id-cell');
Array.prototype.forEach.call(cells, function (cell) {
cell.addEventListener(
'onmouseover',
function () {
function1(this.dataset.projectId);
},
true
);
});
}[/Codebox]