How to get location, I want to display a div at the location of the bottom left side of a table row

I have a table with rows.

I have the ID of the row I want to display a div block under when a button is clicked.

How can I get the location?

<table>
<tr id="tr1">
...
</tr>
<tr>
...
</tr>
</table>

So when a button is clicked, display the div d1 under the row with ID=tr1. I need the buttom left side of the row i.e. I want my div to start there and display below and to the right of that point.

Oh an开发者_开发百科d above any other element so it i.e. it should be the top most element z-index?

Alternatively, if you're using jQuery UI you have the option of using the extensions to the position function:

jQuery("#d1").position({
    my: "left top",
    at: "left bottom,
    of: jQuery("#tr1")
});

The z-index can be dealt with via CSS, if required.

To get the tr node:

trNode=document.getElementById('tr1');

I'm a little fuzzy on what you're wanting to do with the div. Please give more info.

Just put the div there in your HTML, and set its visibility to "hidden". On click, set its visibility to "visible". Much easier (if you can achieve the same thing...)

If I've understood you correctly, you are looking the physical position of the bottom left corner of #tr1. If that's the case, you can use the offset method:

var trOffset = $("#tr1").offset(),
    trLeft = trOffset.left,
    trBottom = trOffset.top + $("#tr1").height();

That will give the you location of the bottom left corner (relative to the document) of #tr1, and you should then be able to position your div accordingly.

The top offset property gets the offset of the top of the selected element. As you want the bottom, you need to add the height of the element to the top offset.