Абсолютно позиция DIV справа от последней выбранной (по классу) ячейки TD в строке таблицы

Question

У меня есть такая таблица:

<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>

У меня также есть div на том же уровне, у которого есть изображение (стрелка) в качестве фона:

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

CSS контролирует основы элемента маркера, но я не назначил значения сверху и слева.То, что я пытаюсь сделать, - это когда страница готова, с помощью JQuery выяснить положение «выбранной» строки и расположить элемент маркера справа от нее.

Пока это мой код:

$('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');
});

Я в растерянности, поскольку мое смещение продолжает возвращаться как ноль.В моем CSS таблица имеет ширину 100% в ячейке, которая составляет 300 пикселей, но самим ячейкам TD не назначена ширина (имеет ли это значение, так как я нацеливаюсь на строку?) Возможно, я смотрел на этослишком долго, и ответ очевиден, но кто-нибудь может помочь?

Большое спасибо заранее.

Answer 1

Я вижу две проблемы:

1. jQuery не нравится иметь точку в имени класса таблицы "table.std-table".
2. В вашем селекторе отсутствует точка.

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>

Answer 2

С помощью Тома, вот код, который я использовал в конце;

$('.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'); 
}); 

Я понял, что таблица находится в DIV, который был расположен относительно, поэтому мне не пришлось беспокоитьсясмещение влево или вправо.CSS обрабатывал постоянное положение маркера по горизонтали.Сценарий сделал все остальное!

Спасибо Тому за помощь.