Getting HTML table row position and showing div next to it

Question

I've managed to show <div> which contains a relevant image to the table row, but I want my <div> to appear next to the clicked row like this:

enter image description here

In this example, when user clicks on second row, <div> is shown right next to it. So, how do I get position of clicked row?

I tried this and this solutions, but they both return the table's position instead of row's.

Please post the code you have tried, not links to the code. Questions here should be all inclusive and not require research just to figure out what you're asking. — Ben Felda, Jan 29 '13 at 17:51
Do you mean you want to get the index of the row that was clicked? Like "0", or "2". — jwatts1980, Jan 29 '13 at 17:55

score 0 · Accepted Answer · answered Jan 29 '13 at 18:12

Here is an example to get you started using jQuery - http://jsfiddle.net/CtWSf/

$('td').click(function(e){
    var currentPosition = $(this).offset();
    $('.results').html(currentPosition.top);
});

For this markup -

<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>
<div class="results"></div>

Getting HTML table row position and showing div next to it

1 Answers1

Linked