Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get Cell Location

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.

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td> // If I click on this I would like to know tr:1 & td:2
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

Javascript:

// Track onclicks on all td elements

var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td"); // 

for(var i = 1; i < cells.length; i++){
    // Cell Object
    var cell = cells[i];
    // Track with onclick
    cell.onclick = function(){
        // Track my location;
        // example: I'm in table row 1 and I'm the 2th cell of this row
    }
}
like image 899
Adam Halasz Avatar asked Feb 15 '11 00:02

Adam Halasz


People also ask

How do I find the location of a cell in Excel?

Locate the position of a specific value in your data set Or, to use Excel's built-in functions, select Formulas > Lookup & Reference > MATCH. Returns a number that indicates the first relative position of data in a list, array, or selected range of cells.

How do you reference a cell location?

A cell reference or cell address is a combination of a column letter and a row number that identifies a cell on a worksheet. For example, A1 refers to the cell at the intersection of column A and row 1; B2 refers to the second cell in column B, and so on.


2 Answers

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/

like image 123
user113716 Avatar answered Oct 04 '22 10:10

user113716


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)");
        };
    }
}
like image 23
Nathan Anderson Avatar answered Oct 04 '22 10:10

Nathan Anderson