Как получить координаты ячейки, используя событие onclick, используя JavaScript

Question

Я пытаюсь получить координаты моих ячеек в этой таблице, но с кодом, который у меня есть, координаты будут повторяться после закрытия каждого тега tr, так что только с 0-9 (у меня есть таблица из 9 строк с9 ячеек).Как я могу заставить его продолжать, а не начинать сначала?или еще лучше, есть ли способ получить координаты X и Y?PS Я никогда не использовал JQuery.Спасибо.

html код.

<table id="grid">
<tr>
    <td onclick="myFunction(this)">1</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">4</td>
    <td onclick="myFunction(this)">8</td>
    <td onclick="myFunction(this)">9</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">6</td>
</tr>
<tr>
    <td onclick="myFunction(this)">7</td>
    <td onclick="myFunction(this)">3</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">4</td>
    <td onclick="myFunction(this)"></td>
</tr>
<tr>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">1</td>
    <td onclick="myFunction(this)">2</td>
    <td onclick="myFunction(this)">9</td>
    <td onclick="myFunction(this)">5</td>
</tr>   
<tr>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">7</td>
    <td onclick="myFunction(this)">1</td>
    <td onclick="myFunction(this)">2</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">6</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
</tr>
<tr>
    <td onclick="myFunction(this)">5</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">7</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">3</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">8</td>
</tr>
<tr>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">6</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">9</td>
    <td onclick="myFunction(this)">5</td>
    <td onclick="myFunction(this)">7</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
</tr>
<tr>
    <td onclick="myFunction(this)">9</td>
    <td onclick="myFunction(this)">1</td>
    <td onclick="myFunction(this)">4</td>
    <td onclick="myFunction(this)">6</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
</tr>
<tr>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">2</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">3</td>
    <td onclick="myFunction(this)">7</td>
</tr>
<tr>
    <td onclick="myFunction(this)">8</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">5</td>
    <td onclick="myFunction(this)">1</td>
    <td onclick="myFunction(this)">2</td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)"></td>
    <td onclick="myFunction(this)">4</td>
</tr>

JScde.js

window.onload = function(){

var cells = document.getElementsByTagName('td');
for(var prop in cells){
    if(cells[prop].innerHTML === ''){
        cells[prop].innerHTML += '<input type="text" maxlength="1"/>'
    }
}
};
function myFunction(x){
alert("cell index is: " + x.cellIndex);

}

Answer 1

Здесь, вместо того, чтобы передавать this в функции обратного вызова, вы должны передать event, и вы можете использовать cellIndex свойство td и свойство rowIndex tr, чтобы узнать фактические координаты в ваших терминах -

function myFunction(evt){
  let row = evt.target.parentElement.rowIndex;
  let col = evt.target.cellIndex;

  console.log(row, col);
}

let myTable = document.getElementById('myTable');
let tds = myTable.querySelectorAll('td');

tds.forEach(function(td){
  td.addEventListener('click', myFunction);
});

<table id="myTable">
<tr>
    <td>1</td>
    <td></td>
    <td></td>
    <td>4</td>
    <td>8</td>
    <td>9</td>
    <td></td>
    <td></td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>4</td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>9</td>
    <td>5</td>
</tr>   
<tr>
    <td></td>
    <td></td>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td></td>
    <td>6</td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>5</td>
    <td></td>
    <td></td>
    <td>7</td>
    <td></td>
    <td>3</td>
    <td></td>
    <td></td>
    <td>8</td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td>6</td>
    <td></td>
    <td>9</td>
    <td>5</td>
    <td>7</td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>9</td>
    <td>1</td>
    <td>4</td>
    <td>6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>3</td>
    <td>7</td>
</tr>
<tr>
    <td>8</td>
    <td></td>
    <td></td>
    <td>5</td>
    <td>1</td>
    <td>2</td>
    <td></td>
    <td></td>
    <td>4</td>
</tr>

Жить в действии - https://jsitor.com/XljAwX0j3