JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<table class="table arrow-nav">
    <thead>
        <tr>
            <th>
                <input type="checkbox">
            </th>
            <th>Tab</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody class="simple_with_animation vertical ui-sortable">
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="General" class="form-control input-md">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="Name" class="form-control input-md">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="General" class="form-control input-md">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="Name" class="form-control input-md">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="General" class="form-control input-md">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="Name" class="form-control input-md">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder" value="General" class="form-control input-md">
            </td>
            <td>
                <input id="textinput" name="textinput" type="text" placeholder="placeholder"...

JavaScript

$('table.arrow-nav').keydown(function(e) {
    var $table = $(this);
    var $active = $('input:focus,select:focus', $table);
    var $next = null;
    var focusableQuery = 'input:visible,select:visible,textarea:visible';
    var position = parseInt($active.closest('td').index()) + 1;
    console.log('position :', position);
    switch (e.keyCode) {
        case 37:
            // <Left>
            $next = $active.parent('td').prev().find(focusableQuery);
            break;
        case 38:
            // <Up>                    
            $next = $active.closest('tr')
                .prev()
                .find('td:nth-child(' + position + ')')
                .find(focusableQuery);

            break;
        case 39:
            // <Right>
            $next = $active.closest('td').next().find(focusableQuery);
            break;
        case 40:
            // <Down>
            $next = $active.closest('tr')
                .next()
                .find('td:nth-child(' + position + ')')
                .find(focusableQuery);
            break;
    }
    if ($next && $next.length) {
        $next.focus();
    }
    if (e.which == 13) {
    stop()
    }
    
});