JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<table id='tab'>
    <tr>
        <td tabindex="0">1</td>
        <td tabindex="1">2</td>
        <td tabindex="2">4</td>
        <td tabindex="3">5</td>
        <td tabindex="4">6</td>
    </tr>
    <tr>
        <td tabindex="5">1</td>
        <td tabindex="6" colspan="3">2</td>
        <td tabindex="7">3</td>
    </tr>
    <tr>
        <td tabindex="8">1</td>
        <td tabindex="9">2</td>
        <td tabindex="10">3</td>
        <td tabindex="11">4</td>
        <td tabindex="12">5</td>
    </tr>
    <tr>
        <td tabindex="13" rowspan="2">1</td>
        <td tabindex="14">2</td>
        <td tabindex="15">3</td>
        <td tabindex="16">4</td>
        <td tabindex="17">5</td>
    </tr>
    <tr>
        <td tabindex="18">1</td>
        <td tabindex="19">2</td>
        <td tabindex="20">3</td>
        <td tabindex="21">4</td>
    </tr>
    <tr>
        <td tabindex="22">1</td>
        <td tabindex="23">2</td>
        <td tabindex="24">3</td>
        <td tabindex="25">4</td>
        <td tabindex="26">5</td>
    </tr>
</table>

CSS

td {
    border: 1px solid blue;
    width: 30px;
    height: 30px;
    text-align:center;
}
.focus, :focus {
    border: 1px solid red;
}

JavaScript

(function () {
    console.clear();
    var tab = document.getElementById('tab');
    tab = tab.firstElementChild;
    item = tab.firstElementChild.firstElementChild;


    function f(item) {
        item.className = 'focus';
    }

    function u(item) {
        item.className = '';
    }

    f(item);

    tab.onclick = function (e) {
        if (e.target.nodeName === 'TD') {
            foc(e.target);
        }
    }
    var x = 0,y = 0;
    var tr = tab.children.item(0).children;
    var td1 = [tr.item(0), tr.item(1), tr.item(2), tr.item(3), tr.item(4)];
    tr = tab.children.item(1).children;
    var td2 = [tr.item(0), tr.item(1), tr.item(1), tr.item(1), tr.item(2)];
    tr = tab.children.item(2).children;
    var td3 = [tr.item(0), tr.item(1), tr.item(2), tr.item(3), tr.item(4)];
    var trr = tr = tab.children.item(3).children;
    var td4 = [tr.item(0), tr.item(1), tr.item(2), tr.item(3), tr.item(4)];
    tr = tab.children.item(4).children;
    var td5 = [trr.item(0), tr.item(0), tr.item(1), tr.item(2), tr.item(3)];
    tr = tab.children.item(5).children;
    var td6 = [tr.item(0), tr.item(1), tr.item(2), tr.item(3), tr.item(4)];
    var tabMap = [td1, td2, td3, td4, td5, td6];    
    

    function foc(x, y) {
        console.log(x,y);
        u(item);
        item = tabMap[y][x];
        f(item);
    }
    document.body.onkeydown = function (e) {
        switch (e.keyCode) {
            case 37: // left
                if ( x > 0) {
                    x -= item.colSpan;
                    if ( x < 0 ) {x = 0;}
                }
                break;
            case 38: // up
                if ( y > 0) {
                    y -= item.rowSpan;
                    if ( y < 0 ) {y = 0;}
                }
                break;
            case 39: // right
                if ( x < 4) {
                    x += item.colSpan;
                    if ( x > 4 ) {x = 4;}
                }
                break;
            case 40: // down
               ...