覆盖div，需要帮助找到底层表格的最近tr

Question

我有一个调度系统，我有一个位于表格顶部的叠加水平列表。当他们单击add_new_row li时，它会将新添加的li偏移到他们沿y轴单击的位置。我需要找到最接近点击位置的tr。当tr不在你点击的元素里面时，我已经毫无结果地搜索了如何找到最接近的tr位置的答案.jquery中注释掉的代码是对它的一次尝试。

JSFIddle link http://jsfiddle.net/ugnaje0q/24/。当您单击灰色条时，将显示另一个并偏移到您单击的位置。我需要找到最接近点击事件的tr并获取其时间属性。

代码如下：

 <table id ="grid">
                         <tr class="full_hour" time='0'><td></td>     
                        </tr>  
                         <tr class="half_hour" time='0.5'><td></td>     
                        </tr>
                        <tr class="full_hour" time='1'>  
                            <td></td>
                        </tr>
                        <tr class="half_hour" time='1.5'> 
                             <td></td>
                        </tr>
                        <tr class="full_hour" time='2'>
                             <td></td>
                        </tr>
                        <tr class="half_hour" time='2.5'> 
                             <td></td>
                        </tr>
                        <tr class="full_hour" time='3'>
                             <td></td>

                        </tr>
</table>

和叠加div

 <ul class="horizontal">
                <li class="add_new_row" style="background-color:#ddd !important;"></li>            
 </ul>

和jquery

$(document).ready(function(){
    var $divBottom = $('#grid');
    var $divOverlay = $('.horizontal');
    var rowPos = $divBottom.position();
    var bottomTop = rowPos.top -10;
    var bottomLeft = rowPos.left +25;
    var bottomWidth = $divBottom.css('width');
    var bottomHeight = '330px';

    $divOverlay.css({
      position: 'absolute',
      top: bottomTop,
      left: bottomLeft,
      width: bottomWidth,
      height: bottomHeight

  });

 });

$(document).on('click', '.add_new_row', function(e){

       $(this).before('<li><div class="hours"></div></li>');
      // var x = $('body').find($(this)).closest('#grid tr').attr('time');
       var x = e.pageX;
       var y = e.pageY;
     //var j= $('#grid').closest('tr').position(y.top);

      $('body').find('.hours:last').closest('li').offset({top:e.pageY});


    });

而css是

#grid{
   // display:block;
    position: relative;
    width:300px;
    border:1px solid;
    z-index:1;

}

#grid tr.full_hour{
    border: 1px solid;
    height:20px;
    width: 300px;   
}

#grid tr.half_hour{
    border: 1px solid gray;
    height:20px;
    width: 300px;
}
 #schedule_container{
   height:68%;
   position:relative;
}

ul.horizontal{
padding:0;
z-index:3;
}

ul.horizontal li{
    line-height:1.5em;
display:block;
width:20px;
text-align:center;
float:left;
margin-left:5px;
margin-right:5px;
background-color:#eee;
height: 100%;
}