Determining a table cell’s x and y position/index

When working with HTML tables, we often want to extract the column and row index for a particular cell. Easy enough, surely — just use row.rowIndex and cell.colIndex, right? Well, no.

The spanner in the works

…is the presence of cells that span rows or columns (apologies for the terrible pun). For example, in the following table:

the column index of cell “g” is reported by the browser to be 2 — when in fact it should be 4!

The solution

Fortunately, there is a solution. The code below is based on this very old example by Matt Kruse. I updated it, tidied it up, and MooTools-ified it.

Usage

Simply call “getCellCoords” on the (header) cell you’re interested in. This will return an object containing “x” and “y” members — the column and row index, respectively.

The code