Clickable grid but not first or second row

HTML

<table class="table" href="#popup">
    <tr id="tr1">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr2">
        <td><input type="checkbox"></td>
        <td>Test2</td>
        <td>Test2</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr3">
        <td><input type="checkbox"></td>
        <td>Test3</td>
        <td>Test3</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr4">
        <td><input type="checkbox"></td>
        <td>Test4</td>
        <td>Test4</td>
        <td><input type="checkbox"></td>
    </tr>
</table>

JavaScript

$(function(){
    var tableRows = $('table').find('tr');
    
    $('table').on('click', 'tr', function(){
        if (this == tableRows[0])
            alert('first row');
        else if (this == tableRows[tableRows.length - 1])
            alert('last row');
        else
            alert('somewhere in the middle');
    });    
});