Getting offsetTop of element in a table

Question

I can't seem to figure out how to get the offsetTop of an element within a table. It works fine on elements outside tables, but all of the elements within a table return the same result, and it's usually at the top of the page. I tried this in Firefox and Chrome. How do I get the offsetTop of an element in a table?

Solution

offsetTop returns a value relative to offsetParent; you need to recursively add offsetParent.offsetTop through all of the parents until offsetParent is null. Consider using jQuery's offset() method.

EDIT: If you don't want to use jQuery, you can write a method like this (untested):

function offset(elem) {
    if(!elem) elem = this;

    var x = elem.offsetLeft;
    var y = elem.offsetTop;

    while (elem = elem.offsetParent) {
        x += elem.offsetLeft;
        y += elem.offsetTop;
    }

    return { left: x, top: y };
}

Comments

[KeatsKelleher]

This doesn't work in IE7 (reliably). IE5-7 doesn't count elements with relative positioning as offsetParents.

[Mo.]

@SLaks brilliant solution :)