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控制着标记元素的基础知识，但我没有指定的是top和left值。我要做的是当页面准备就绪时使用JQuery找出'selected'行的位置并将marker元素放在它的右边。

到目前为止，这是我的代码：

$('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中，表格在300px的单元格中的宽度为100％但是TD单元格本身没有分配给它们的宽度（这是否重要，因为我正在瞄准行？）也许我盯着这个太久了，答案很明显，但有人可以帮忙吗？

非常感谢提前。

Answer 1

我看到两个问题：

jQuery不喜欢在表类名“table.std-table”中有句号。
您的选择器缺少一段时间。

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

在Tom的帮助下，这是我最后使用的代码;

$('.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水平处理标记的永久位置。脚本完成剩下的工作了！

感谢汤姆的帮助。

绝对将DIV放置在表格行中最后选择的（按类）TD单元格的右侧

2 个答案: