如何使用javascript使用onclick事件获取单元格的坐标

我试图得到这个表中我的单元格的坐标，但是用我的代码，坐标会在每个tr标记关闭后重复，所以只有从0-9开始，我有一个9行9个单元格的表。 我怎样才能让它继续而不是重新开始？或者更好的是，有没有办法得到x和y坐标？ p、 我从未使用过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);

---

}

在这里，您应该传递事件，而不是在函数回调中传递该事件，您可以使用td的cellIndex属性和tr的rowIndex属性来了解术语中的实际坐标-

函数myFunctionevt{ 让row=evt.target.parentElement.rowIndex； 设col=evt.target.cellIndex； console.logrow，col； } 让myTable=document.getElementById'myTable'； 设tds=myTable.queryselectoral'td'； tds.forEachfunctiontd{ td.addEventListener'click'，myFunction； }; 1. 4. 8. 9 6. 7. 3. 4. 1. 2. 9 5. 7. 1. 2. 6. 5. 7. 3. 8. 6. 9 5. 7. 9 1. 4. 6. 2. 3. 7. 8. 5. 1. 2. 4.

---

tr元素有属性，您可以将其用作y坐标。为什么不尝试类似于x.getBoundingClientRect的东西，它具有x、y、宽度和高度属性。谢谢，这正是我等待要做的。另外，为了我自己的学习，是否有一种方法可以使用JS来避免将onclick事件添加到所有td标记中？是的。让我在回答中添加这个，我添加了JS逻辑，一次在所有td上添加click listener。享受！！：谢谢我真的很感谢你的帮助！！