how to get the coordinates of a cell using onclick event using javascript

Question

I am trying to get the coordinates of my cells in this table, but with the code i have the coordinates will repeat after each tr tag is closed, so only going from 0-9 (i have a table of 9 rows with 9 cells). How can i get it to continue instead of starting over? or better yet, is there a way to get x and y coordinates? p.s. i have never used jquery. Thanks.

html code.

<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);

}

tr elements have rowIndex property, you can use that as a "y-coordinate". — Teemu
– Teemu, Commented Feb 24, 2019 at 17:34
Why not try something like this x.getBoundingClientRect() that has the x, y, width, and height properties. — Cocest
– Cocest, Commented Feb 24, 2019 at 17:42

Ashvin777 · Accepted Answer · 2019-02-24 18:00:28Z

1

Here you go, instead of passing this in function callback you should pass event and you can use cellIndex property of td and rowIndex property of tr to know the actual coordinates in you terms -

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>

Live in action - https://jsitor.com/XljAwX0j3

edited Feb 24, 2019 at 18:00

answered Feb 24, 2019 at 17:48

Ashvin777

1,48213 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

H. Martin Over a year ago

Thanks, that did exactly what i was waiting to do. Also, just for my own learning, is there a way to use JS to avoid having to add the onclick event to all td tags?

Ashvin777 Over a year ago

Yes there is. Let me add that in answer.

Ashvin777 Over a year ago

I have added JS logic to add click listener on all td at once. Enjoy !! :)

H. Martin Over a year ago

Thanks. I really appreciate your help!!

Collectives™ on Stack Overflow

how to get the coordinates of a cell using onclick event using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related