JSFiddle - React, Tailwind, and code Playground

by queryj

HTML

<table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" value="r"/></td>
            <td><input type="text" value="u"  /></td>
            <td>&nbsp;</td>
            <td><input type="text" value="m"  /></td>
            <td><input type="text" value="d"  /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="text" value="l" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><input type="text" value="q" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><input type="text" value="e" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="text" value="p" /></td>
            <td><input type="text" value="v" /></td>
            <td>&nbsp;</td>
            <td><input type="text" value="r" /></td>
        </tr>

    </tbody>
</table>

CSS

td.active{
    border:1px solid blue;font-weight:bold;color:yellow;background-color:blue}
td{padding:5px;text-align:center}

JavaScript

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    reCalculate(e);
    rePosition();
    // if key is an arrow key, don't type the user
    // input. if it is any other key (a, b, c, etc)
    // edit the text
    if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
    }
});

$('td').click(function() {
    active = $(this).closest('table').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
          ...