Klicken Sie auf HTML-Tabelle und erhalten Zeilennummer (mit Javascript, nicht jquery)

Question

Ich würde gerne wissen, wie man auf eine Schaltfläche in einer HTML-Tabelle klicken und erhalten die Zeilen- und Spaltennummer an mich zurückgegeben: Zum Beispiel mit den folgenden Tabelle:

<table> 
    <tr> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    <td><input type="button" value="button"></td> 
    </tr> 
    </table> 

Wie würde ich verwenden JavaScript auf der ersten Taste in der zweiten Reihe zu klicken und sie haben mir sagen, dass ich auf der ersten Zelle in der zweiten Reihe angeklickt? Muss jede Taste eine eindeutige ID haben oder nicht?

Answer 1

Versuchen Sie folgendes:

function getId(element) { 
 
    alert("row" + element.parentNode.parentNode.rowIndex + 
 
    " - column" + element.parentNode.cellIndex); 
 
}

<table> 
 
    <tr> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    <td><input type="button" value="button" onclick="getId(this)"></td> 
 
    </tr> 
 
</table>

Answer 2

Die meisten generische Version von @Gremash js Funktion

function getId(element) { 
    alert("row" + element.closest('tr').rowIndex + 
    " -column" + element.closest('td').cellIndex); 
}