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的{{1}}属性和{{1}的rowIndex属性}了解您所用的实际坐标-

td

tr

现场直播-https://jsitor.com/XljAwX0j3

如何使用javascript

1 个答案: