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:

a b c d
e f g
h i j
k l m n

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.


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

[Music] Rising

It’s been a while since I last wrote a wholly-orchestral piece. As I was writing this one, I toyed with the idea of turning it into an industrial piece, à la Conflagration, but ultimately rejected that path.

Dark in parts, fanfare-like in others, and with a playful duet between flute and bassoon towards the end, Rising is quite certainly programmatic (that is, it constructs a narrative). The story that it tells — well, I’ll leave that open to your interpretation.

(Download higher-quality mp3)

TrackPerformer data

I’ve extracted the performance data from Rising, so that if you want to, you can build a TrackPerformer performance of the piece. Download rising.js to get started. Follow along with my TrackPerformer step-by-step — with the template in hand, you can safely skip large chunks of the step-by-step. You’ll mostly need to focus on steps 1, 5, 6, 7, and 8.

If you do build a performance, let me know about it! I’m tempted to start releasing the data for my other tracks as well, so if you’d like to build a performance for any of my pieces, just let me know in the comments.

Creative Commons License
Rising by Barry van Oudtshoorn is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.