Get Cell Location

Question

So I have this table, and when I click on a td I would like to know where is that(which row and cell) without any attributes on the elements.

&l         


        

Answer 1

Using "this" on cells table

function myFunction(x) {
        var tr = x.parentNode.rowIndex;
        var td = x.cellIndex;        
      
        document.getElementById("tr").innerHTML = "Row index is: " + tr;
        document.getElementById("td").innerHTML = "Column index is: " + td;
      }

tr, th, td {
  padding: 0.6rem;
  border: 1px solid black
}

table:hover {
  cursor: pointer;
}

<table>
    <tbody>
        <tr>
            <td onclick="myFunction(this)">1</td>
            <td onclick="myFunction(this)">2</td>
            <td onclick="myFunction(this)">3</td>
        </tr>

        <tr>
            <td onclick="myFunction(this)">4</td>
            <td onclick="myFunction(this)">5</td>
            <td onclick="myFunction(this)">6</td>
        </tr>

        <tr>
            <td onclick="myFunction(this)">7</td>
            <td onclick="myFunction(this)">8</td>
            <td onclick="myFunction(this)">9</td>
        </tr>
    </tbody>
</table>

<p id="tr"></p>
<p id="td"></p>

Answer 2

Well, When you have rowspan/colspan you can have a lot more fun, however, if the grid is regular, you can just determine your position from the index by doing:

row = Math.floor(i / rows); 
column = i % columns;

Answer 3

In the handler, this is the table cell, so for the cell index do this:

var cellIndex  = this.cellIndex + 1;  // the + 1 is to give a 1 based index

and for the row index, do this:

var rowIndex = this.parentNode.rowIndex + 1;

Example: http://jsfiddle.net/fwZTc/1/

Answer 4

This script block will provide you the information you desire, by adding the information as properties to the cell and then accessing them in the onclick function:

// Track onclicks on all td elements
var table = document.getElementsByTagName("table")[0];
// Get all the rows in the table
var rows = table.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {
    //Get the cells in the given row
    var cells = rows[i].getElementsByTagName("td");
    for (var j = 0; j < cells.length; j++) {
        // Cell Object
        var cell = cells[j];
        cell.rowIndex = i;
        cell.positionIndex = j;
        cell.totalCells = cells.length;
        cell.totalRows = rows.length;
        // Track with onclick
        console.log(cell);
        cell.onclick = function () {
            alert("I am in row " + this.rowIndex + " (out of " + this.totalRows + " rows) and I am position " + this.positionIndex + " (out of " + this.totalCells + " cells)");
        };
    }
}