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

问题描述 投票：0回答：1

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

}

javascript html5
1个回答
1
投票

在这里你去，而不是在函数回调中传递this你应该通过event你可以使用cellIndex的td属性和tr的rowIndex属性来知道你的实际坐标 - 

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.