Wert einer Zelle einer Tabelle über oncklick auslesen

Jochen

Ich habe eine dynamisch erzeugte Tabelle. Ich möchte wenn ich eine Zelle dieder Tabelle anklicke den wert zurück bekommen.

Ich bekomme das nicht hin. Anbei mein (geliehener) Code für die Erzeugung der Tabelle.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testen</title>
<script>
xVar=10;
yVar=10;
function start(row,col) {
node = document.getElementById("tabelle1");
node.parentNode.insertBefore(createTable(row,col), node );
}
function random() {
return Math.floor((Math.random() * 998) + 1);
}
function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for(var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for(var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}

</script>
</head>

Ich finde wohl Funktionen im Internet daür, aber ich kann sie nicht mit der Tabelle verknüpfen.

LG

Joachim

Sempervivum

Hast Du die Funktion addEventListener() gefunden? Die musst Du mit deinen Tabellenzellen verknüpfen:

JavaScript

function createTable(row, col, id) { 
                var myTable = document.createElement("table");
                var mytablebody = document.createElement("tbody");
 
                for (var j = 0; j < row; j++) {
                    mycurrent_row = document.createElement("tr");
                    for (var i = 0; i < col; i++) {
                        mycurrent_cell = document.createElement("td");
                        mycurrent_cell.addEventListener("click", function() {console.log(this.innerHTML);})
                        currenttext = document.createTextNode(random());
                        mycurrent_cell.appendChild(currenttext);
                        mycurrent_row.appendChild(mycurrent_cell);
                    }
 
                    mytablebody.appendChild(mycurrent_row);
                }
 
                myTable.appendChild(mytablebody);
                myTable.setAttribute("ID", id);
                return myTable;             }

Alles anzeigen

Jochen

ich habe die zeile mit dem Eventlistener problemadäquat ergänzt. wenn ich eine Zelle anklicke passiert leider nichts. Keine Rückmeldung.
Bin zu dumm

mycurrent_cell.addEventListener("onClick", function() {alert(i,j,currenttext);})

LG
Joachim

Jochen

wenn ich das von mir fälschlicherweise genommene onClick durch den click ersetze bekomme ich einen Output . Aber immer nur die Zahl 10.
es sieht so aus:

mycurrent_cell.addEventListener("click", function() {alert(i,j);
var x = document.getElementsByName("currenttext").innerHTML;
alert (x);})

bei alert(x) bekomme ich als Rückmeldung nicht die Zufallszahl sondern "undefiend"

LG

Joachim

Sempervivum

Die Parameter der Listener-Funktion sind vordefiniert, Du kannst sie nicht einfach belegen, wie Du möchtest:
https://developer.mozilla.org/en-US/docs/Web…s#Event_handler's_parameters_this_binding_and_the_return_value
Mit "this" hast Du Zugriff auf das Element, das geklickt wurde und mit innerHTML kannst Du dann den Inhalt der Tabellenzelle ermitteln:

JavaScript

this.innerHTML

Jochen

Vielen Dank.

Noch eine Frage:

wie komme ich an die Indizes der Zelle, die ich angeklickt habe?

LG

Joachim

Sempervivum

Das ist leider ein bisschen kompliziert und sieht so aus:

function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj) {
return function () {
console.log(this.innerHTML, iii, jjj);
}
}(i, j));
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}
Das Forum hat leider die Zeilenumbrücke verschluckt, daher muss ich den Code ohne Tags posten.

Jochen

Vielen Dank Meister,

ich verstehe es zwar nicht, aber es läuft wie gewollt

Joachim

Sempervivum

Zitat

ich verstehe es zwar nicht

Dann will ich versuchen, es zu erklären. Verwendet man die Variablen i und j "einfach so" in der Callback-Funktion, hat man das Problem, dass diese nicht sofort ausgeführt wird, während die Schleife durchläuft, sondern erst später, wenn der Klick erfolgt. Zu diesem Zeitpunkt ist die Schleife längst durchgelaufen und die Variablen i und j haben ihre Endwerte.
Bei dem Code mit zwei verschachtelten Funktionen wird die äußere sofort aufgerufen, wenn die Schleife durchläuft. Sie hat i und j als Parameter und liefert die eigentliche Callback-Funktion als Rückgabewert zurück. In der äußeren Funktion haben dann die Parameter iii und jjj die Werte, die sie während des Schleifendurchlaufs hatten und die innere verwendet diese, wenn sie durch Klick aufgerufen wird.

Jochen

Ich danke dir, das Grundprinzip habe ich verstanden.

Wenn ich jetzt klicke, weiß ich nun welches Feld ich angeklickt habe. Aber ich bekomme die Indizes iii und jjj nicht aus der Funktion createTable raus um sie in einer anderen Funktion weiter zu verwenden.

Ich versuche hier ein mini mini Spiel zu basteln.

Es soll dem Spieler 5 Zahlen aus der mit Zufallszahlen gefüllten Tabelle (erzeugt mit obiger Funktion createTable) vorgegeben werden Er soll dann möglichst schnell diese 5 Zahlen in der Tabelle anklicken.
Ich prüfe dann ob er die richtigen Zahlen angeklickt hat.

Mein Problem ist wie bekomme ich iii und jjj aus der obigen Funktion createTable raus und in eine andere Funktion rein mit der ich dann die Übereinstimmung überprüfen kann?

LG

Joachim

Sempervivum

Zitat

wie bekomme ich iii und jjj aus der obigen Funktion createTable raus und in eine andere Funktion rein mit der ich dann die Übereinstimmung überprüfen kann?

Ich würde die Sache etwas anders angehen und die Prüfung in der Callback-Funktion anstoßen (du brauchst ja sowie so den Klick als Anstoß), indem Du die Funktion, die die Prüfung machst, dort aufrufst und die benötigten Werte als Parameter übergibts.

Jochen

Elegante Lösung, habe ich so realisiert. ich rufe in createtable die Funktion verifyData auf.

Wenn jetzt eine Falscheingabe erfolgt, möchte ich die Funktion createTable verlassen und verhindern, dass weiter angeklickt wird.
Ich möchte die gesamte Tabelle sperren.

Wie relisiere ich das? Gibt es eine Art Break. e

function verifyData(v1,v2){
if (v1 != v2) {
counter==0;
Abbruch / Speerung????????;
}
else {
counter++;
}
}

LG

Joachim

Sempervivum

Man könnte daran denken, die Eventlistener zu entfernen, aber das ist ziemlich umständlich, weil es anonyme Funktionen sind. Einfacher ist es, eine Statusvariable in einem data-Attribut der Tabelle zu benutzen:
http://pastebin.com/vem43VF2

(Leider verschluckt dieses Forum immer die Zeilenumbrüche, daher habe ich es bei pastebin eingestellt.)
Ich habe mir erlaubt, die Struktur mit #wrtabelle1 und #tabelle1 etwas zu modifizieren.

Jochen

wieder elegant gelöst

Jochen

Jetzt möchte ich nachdem die Funktion create Table erstellt ist darauf zugreifen. Zum Beispiel möchte wissen welcher Wert in der celle(x,y) steht.

Mit der Eigenkration searchvalöue erhalte ich aber keinen Rückgabewert.????????????????????????r

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value=document.getElementById('myTable').rows[rowIndex].cells[cellIndex];
alert(value);
}
LG
Joachim

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

LG
Joachim

Sempervivum

Der Ansatz ist schon richtig, Du musst nur

die richtige ID verwenden, um die Tabelle zu ermitteln
innerHTML verwenden, um den Inhalt der Zelle zu bekommen

So funktioniert's:

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

Jochen

ichj habew es rein kopiert. Aber wenn ich den Button kli cke, kommt keine Meldung, kein alerthttp://www.html-seminar.de/html-css-php-forum/wcf/images/smilies/confused.png

Sempervivum

Dann liegt es möglicher Weise an der ID. Du musst genau die verwenden, die Du hier übergeben hast:

JavaScript

node.appendChild(createTable(row, col, "tabelle1"), node);

Jochen

Da hat es wohl mit dem Smily und co nicht so geklappt: Sorry. Ich wiederhole in Reinkultur:

ich habe den Code rein kopiert. Aber wenn ich den Button klicke, kommt keine Meldung, kein alert Meldung taucht auf.

Neue Frage: Wie kann ich die Tabelle vom Bildschirm löschen. Damit ich die alte Tabelle mittels einem weiteren Button "noch einmal" durch die neue Tabelle mit den neuen Zufallszahlen ersetzen kanm.

Ich werde dir das Spiel später widmen!!!

Jochen

Das habe ich reinkopiert

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

Jetzt mitmachen!