JSFiddle - React, Tailwind, and code Playground

by mollwe

HTML

<table cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" tabindex="-1" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <div tabindex="0">div element with tabindex</div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" tabindex="-1" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
       ...

CSS

input[tabindex="-1"] {
    background-color: red;
}
select:focus, input:focus, [tabindex]:focus {
    background-color: cyan !important;
}

JavaScript

getInputs($('body')).off('keydown.test').on('keydown.test', function (event) {
    //console.log('keydown: ' + event.which);
    
    //up
    if (event.which === 38) {
        var col = $(this).closest('td').add(this).first();
        var row = col.parent();
        var focusables = getRows();
        var index = focusables.index(row);
        var prevRow = index > 0 ? focusables.eq(index - 1) : {};
        
        
        if (prevRow.length) {
            var prevRowCol = prevRow.children().eq(col.index());
            var focusInput = {};
            
            if (prevRowCol.length) {
                focusInput = getInputs(prevRowCol);
            }
            
            if (!focusInput.length) {
                focusInput = getInputs(prevRow);
            }
            
            focusInput.focus();
            event.stopPropagation();
        }
    }
    
    //down
    if (event.which === 40) {
        var col = $(this).closest('td').add(this).first();
        var row = col.parent();
        var focusables = getRows();
        var nextRow = focusables.eq(focusables.index(row) + 1);
        
        if (nextRow.length) {
            var nextRowCol = nextRow.children().eq(col.index());
            var focusInput = {};
            
            if (nextRowCol.length) {
                focusInput = getInputs(nextRowCol);
            }
            
            if (!focusInput.length) {
                focusInput = getInputs(nextRow);
            }
            
            focusInput.focus();
            event.stopPropagation();
        }
    }
    
    //left
    if (event.which === 37) {
        //could mess up editing the text if moving between inputs, could check that cursor is in the beginning though
        var col = $(this).closest('td').add(this).first();
        var row = col.parent();
        
        var inputs = getInputs(row);
        
        var index = inputs.index(this);
        var prevInput = index > 0 ? inputs.eq(index - 1) : {};
    ...