Absolutely Position DIV to the right of the last selected (by class) TD cell in a table row

I have a table like this;

<table 开发者_开发问答class="std-table">
  <tbody><tr>
       <td>DATA</td><td>DATA</td>
  </tr>
  <tr class="selected-trial">
       <td>DATA</td><td>DATA</td>
  </tr>
  <tr>
       <td>DATA</td><td>DATA</td>
  </tr></tbody>

I also have a div on the same level that has an image (arrow) as it's background:

<div class=selected-trial-marker></div>

The CSS is controls the basics of the marker element but what I haven't assigned is top and left values. What I'm trying to do is when the page is ready use JQuery to find out the position of the 'selected' row and position the marker element to the right of it.

This is my code thus far:

$('table.std-table tbody tr.selected-trial td:last').ready(function(){
   var offset= $('table.std-table tbody tr.selected-trial').offset();
   var leftOffset = $('table.std-table').width();
       leftOffset += offset.left +42;
    var topOffSet = (offset.top);
        topOffSet = topOffSet+3;
    $('.trial-selection-marker').css({'top':topOffSet+'px', 'left':leftOffset+'px'}).fadeIn('slow');
});

I'm at a loss as my offset keep coming back as null. In my CSS the table has a width of 100% within a cell that is 300px but the TD cells themselves do not have a width assigned to them (does that matter as I'm targetting the row?) Perhaps I've stared at this for too long and the answer is obvious but can anyone please help?

Many thanks in advance.

I see two issues:

1. jQuery doesn't like having a period in the table class name "table.std-table."
2. Your selector is missing a period.

var offset= $('.table-std-table tbody tr.selected-trial').offset();

<table class="table-std-table">   
    <tbody>
        <tr>        
            <td>DATA</td>
            <td>DATA</td>   
        </tr>   
        <tr class="selected-trial">
            <td>DATA</td>
            <td>DATA</td>   
        </tr>   
        <tr>        
            <td>DATA</td>
            <td>DATA</td>   
        </tr>
    </tbody> 
</table>
<div class=.trial-selection-marker></div> 

<script>
    $('.table-std-table tbody tr.selected-trial td:last').ready(function(){ 
        var offset= $('.table-std-table tbody tr.selected-trial').offset();    

        var leftOffset = $('tablestd-table').width();        
        leftOffset += offset.left +42;     
        var topOffSet = (offset.top);         
        topOffSet = topOffSet+3;     
        $('.trial-selection-marker').css({'top':topOffSet+'px', 'left':leftOffset+'px'}).fadeIn('slow'); 
    });
</script>

With the help of Tom, here was the code I used in the end;

$('.std-table tbody tr.selected-trial td:last').ready(function(){ 
    var offset= $('.std-table tbody tr.selected-trial').offset();        
    var topOffSet = (offset.top);         
    topOffSet = topOffSet-270;     
    $('.trial-selection-marker').css({'top':topOffSet+'px'}).fadeIn('slow'); 
}); 

I realised that the table was within a DIV that was positioned relatively so I did not have to worry about the left or right offset. CSS handled the permanent position of the marker horizontally. The script did the rest!

Thanks Tom for your help.