Overlay div, need help finding closest tr of underlying table

Question

I have a scheduling system and I have an overlay horizontal list that sits on top of a table. When they click the add_new_row li, it offsets the newly added li to the position they clicked along the y axis. I need to find the closest tr to the position clicked. I have searched fruitlessly for an answer of how to find the closest tr position when the tr is not inside the element you are clicking.the commented out code in the jquery is one attempt at it.

JSFIddle link http://jsfiddle.net/ugnaje0q/24/. when you click the gray bar, another one will appear and offset to where you clicked. i need to find the closest tr to the clicked event and grab its attribute of time.

The code is as follows below

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

And an overlay div

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

And the 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});


    });

And the css is

#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%;
}