Highlight Row on Click

Highlight Row on Click

by nickywaites

HTML

<div id="link"></div>
<table id="summary">
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
    <tr><td>Toast</td></tr>
</table>

CSS

#link {
    width:5px;
    height:5px;
    background-color:royalblue; 
    display:none;  
    position:absolute;
}

JavaScript

$(function() {

    $('#summary td').click(function() {

        var td = $(this);
        var position = td.position();
        $('#link').css({
            top: position.top + (td.height() / 2),
            left: position.left + td.width() + 10
        }).show();

    });

});