JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.finderselect/0.6.0/jquery.finderselect.min.js&quot;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">

<table class="table table-condensed" id="demo">
    <thead>
        <tr>
            <td>Name</td>
            <td>Type</td>
            <td>Last Accessed</td>
        </tr>
    </thead>
    <tbody>
        <tr class="un-selected stateUnSelected selected-current" style="cursor: pointer;">
            <td>hello.png</td>
            <td>blah</td>
            <td>Friday, 24 July 2013 4:59PM</td>
            <td>Unsafe Zone. <a href="http://upload.wikimedia.org/wikipedia/en/d/d0/Hello.png" target="_blank"><i class="icon-edit"></i></a>

            </td>
        </tr>
        <tr class="un-selected stateUnSelected selected-last" style="cursor: pointer;">
            <td>hello.png</td>
            <td>blah</td>
            <td>Friday, 24 July 2013 4:59PM</td>
            <td>Unsafe Zone. <a href="http://upload.wikimedia.org/wikipedia/en/d/d0/Hello.png" target="_blank"><i class="icon-edit"></i></a>

            </td>
        </tr>
       
    </tbody>
</table>
    
</div>

CSS

.stateSelected {
    background-color: #3875D7;
}

JavaScript

$('#demo tbody')
    .finderSelect({
        children:"td",
    enableDesktopCtrlDefault: true
});