JSFiddle - React, Tailwind, and code Playground

by Aline Danawara

HTML

<div id="areaItens">
    <table border="0" width="100%" cellspacing="0" cellpadding="0" id="data">
        
        <tbody>
        
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 01</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 02</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 03</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 04</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 05</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 06</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 07</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 08</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number 09</td>
        </tr>
        <tr>
            <td height="30" style="border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom: 1px solid #999999">item number...

CSS

#areaItens {
    width:100%;
    height: 160px;
    border:1px solid #666;
    overflow:auto;
}

.highlight {
    background-color:green;
}

JavaScript

$(document).ready(function(){
window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
    
function highlight(tableIndex) {
    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > $('#data tbody tr').length )
        tableIndex = 0;
    
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0)
    {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');
        
        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');
    }
}


$(document).keydown(function (e) {
    
    switch(e.which) 
    {
        case 38:
            highlight($('#data tbody tr.highlight').index() - 1);
            break;
        case 40:
             highlight($('#data tbody tr.highlight').index() + 1);
            break;
    }

 });

});//]]>