Elements Position Within Table

Using offsetTop and offsetLeft allows you to get the page coordinates of an elements top-left position in relation to its parent element.
If this element is in a table then we also need to get the position of the table and the TD cell that the element is in.

Click in any TD cell or on an image to get its top-left position within the page.

TD Green 1 TD Green 2 TD Green 3 TD Green 4
TD Green 5
TD Red 1 TD Red 2
 TD Red 3
TD Red 4 TD Red 5
TD Green 7
TD Green 8 TD Green 9
TD Green 10 TD Green 11 TD Green 12 TD Green 13

Parent Element
Position
 

<script type="text/javascript">
<!--
moz=document.getElementById&&!document.all
function get_el_pos(el){
cell_el=document.getElementById(el)

cell_left_pos = cell_el.offsetLeft
cell_top_pos = cell_el.offsetTop
parent_el = cell_el.offsetParent

while (parent_el != null){

if(parent_el.tagName == "TD"){ // if parent a table cell, include cell border width

if(!moz){
cell_left_pos += parent_el.clientLeft
cell_top_pos += parent_el.clientTop
}
else{

if(parent_el.tagName == "TABLE"){ // if parent is a table, get its border as a number
nParBorder = parseInt(parent_el.border)

if(nParBorder > 0){ // if a border width is specified
nLeftPos += nParBorder  // append the border width to counter
}

}

}

}

cell_left_pos += parent_el.offsetLeft // add left offset of parent
cell_top_pos += parent_el.offsetTop // add top offset of parent

parent_el = parent_el.offsetParent; // move up the elements until no more offset parents exist
}

return "X pos = "+cell_left_pos+"<P>Y pos ="+cell_top_pos // return totals

}
// -->
</script>

A TD's offsetLeft and offsetTop properties are calculated from the left and top sides of the TABLE element, inclusive of the table border

A child element of the TD calculates its offsetLeft and offsetTop from the left and top sides of the TD element, exclusive of the TD border. The TD's border width, its clientLeft and clientTop need to be appended to any position calculations we make: