Wert einer Zelle einer Tabelle über oncklick auslesen

  • 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>


    <body onload="start(xVar,yVar)">
    <table width="100" border="1" cellpadding="0" cellspacing="1" id="tabelle1"> </table>
    </body>
    </html>


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


    LG


    Joachim

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

  • 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

  • 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

  • Die Parameter der Listener-Funktion sind vordefiniert, Du kannst sie nicht einfach belegen, wie Du möchtest:
    https://developer.mozilla.org/…nt_handlers#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
    1. this.innerHTML
  • 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.

  • 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.

  • 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

  • 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.

  • 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

  • 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.

  • 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

  • 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)" />

  • 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!!!

  • 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)" />