Question

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.

Answer 1

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>