JSFiddle - React, Tailwind, and code Playground

by lookitstony

HTML

Tab1
<table class="keyNavigation" border="1" id="test">
    <tr>
        <td> <span>Test1</span>

        </td>
        <td> <span>Test2</span>

        </td>
        <td> <span>Test3</span>

        </td>
    </tr>
    <tr>
        <td> <span>Test1</span>

        </td>
        <td> <span>Test2</span>

        </td>
        <td> <span>Test3</span>

        </td>
    </tr>
</table>Tab2
<table class="keyNavigation" border="1" id="test1">
    <tr>
        <td> <span>Test1</span>

        </td>
        <td> <span>Test2</span>

        </td>
        <td> <span>Test3</span>

        </td>
    </tr>
    <tr>
        <td> <span>Test1</span>

        </td>
        <td> <span>Test2</span>

        </td>
        <td> <span>Test3</span>

        </td>
    </tr>
</table>

CSS

.keyNavigation {
}
.focus {
    border: 2px solid red;
}

JavaScript

$(".keyNavigation").on("click", function (e) {
    $(".focus").removeClass("focus");
    $(e.target).addClass("focus");
});
$(document).on("keyup", function (e) {
    e.target = $(".focus")[0];
    $(e.target).removeClass("focus");
    var changed = false;
    if (e.keyCode == 37) {
        var column = $(e.target).closest('td');
        var nextCol = column.prev().find("span");
        nextCol.addClass("focus").focus();
        if (nextCol.length > 0) changed = true;
    } else if (e.keyCode == 39) {
        var column = $(e.target).closest('td');
        var nextCol = column.next().find("span");
        nextCol.addClass("focus").focus();
        if (nextCol.length > 0) changed = true;
    } else if (e.keyCode == 38) {
        var row = $(e.target).closest('tr');
        var column = $(e.target).closest('td');
        var colIndex = row.children().index(column);
        var prevRow = row.prev().children();
        if (colIndex < prevRow.length) {
            $(prevRow[colIndex]).find("span").addClass("focus").focus();
            changed = true;
        }
    } else if (e.keyCode == 40) {
        var row = $(e.target).closest('tr');
        var column = $(e.target).closest('td');
        var colIndex = row.children().index(column);
        var nextRow = row.next().children();
        if (colIndex < nextRow.length) {
            $(nextRow[colIndex]).find("span").addClass("focus").focus();
            changed = true;
        }
    }
    if (!changed) {
        $(e.target).addClass("focus");
    }
});