table scrolll with keyboard

by Ea Bangalore

HTML

<table id="table_id">
    <thead style="background: #DAE6F0;">
        <th width="49"></th>
        <th width="106">Location</th>
        <th width="107">SelectionType</th>
    </thead>
    <tbody>
        <tr>
            <td style="width: 49px;"><a onclick="alert('first row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">1</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('second row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">2</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('third row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">3</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('fourth row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">4</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('fifth row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">5</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('first row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">6</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
        <tr>
            <td style="width: 49px;"><a onclick="alert('second row')">Display</a>

            </td>
            <td style="width: 120px; text-align: center">7</td>
            <td style="width: 107px; text-align: center">C</td>
        </tr>
       ...

CSS

tbody {
    border-collapse: collapse;
    overflow: auto;
    max-height: 486px;
}
thead, tbody {
    border-collapse: collapse;
    border: 1px solid black;
    display: block;
}
th {
    border: 1px solid black;
    font-size: 1.3em;
    text-align: center;
    padding-left: 0;
}


tr.active {
    background:#f0f0f0;
}

JavaScript

var isTableActive = false;

$(document).ready(function() {
    
    // every time that there's a click on the page, it will detect if it was on the table or outside of it
    $(document).on("click", function(e) {
        isTableActive = $.contains(document.getElementById("table_id"), e.target);
    });
    
    // the first row will be active by default
    $("#table_id tbody tr:first-child").addClass("active");

    // focus the clicked row (no need to scroll because it's visible
    $("#table_id tbody tr").on("click", function() {
        $("#table_id tbody tr.active").removeClass("active");
        $(this).addClass("active");
    });

    // when a key is pressed
    $(document).on("keydown", function(e) {
        
        switch(e.keyCode) {
            case 38: // up
                if ($("#table_id tbody tr.active").prev().length) {
                    $("#table_id tbody tr.active").removeClass("active").prev().addClass("active");
                }
                break;
            case 40: // down
                if ($("#table_id tbody tr.active").next().length) {
                    $("#table_id tbody tr.active").removeClass("active").next().addClass("active");
                }
                break;
            case 13: // enter
                $("#table_id tbody tr.active").find("a").click();
                break;
        }

        // the selected element will always be visible on top
        $("#table_id tbody").scrollTop(
            $("#table_id tbody tr.active").offset().top + 
            $("#table_id tbody").scrollTop() - 
            $("#table_id tbody").offset().top
        );

        // prevent the scrolling effect if the last active element was the table
        if (isTableActive) {
            e.preventDefault();
            return false;
        }
    });
    
});