JSFiddle - React, Tailwind, and code Playground

by RaphaelDDL

HTML

<table>
    <tbody>
        <tr>
            <td>
                <input type="text" name="date1" id="date1" value="SOMEVALUE" size="1" readonly="true" />
            </td>
            <td>
                <input type="text" name="amount1" id="amount1" size="5" readonly="readonly" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="date1" id="date2" value="SOMEVALUE" size="1" readonly="true" />
            </td>
            <td>
                <input type="text" name="amount1" id="amount2" size="5" readonly="readonly" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="date23" id="date23" value="SOMEVALUE" size="1" readonly="true" />
            </td>
            <td>
                <input type="text" name="amount3" id="amount23" size="5" readonly="readonly" />
            </td>
        </tr>
    </tbody>
</table>

CSS

.selected {
    border: 1px solid red;
}
input {
    width: 100px;
}
input:not([readonly]) {
    background-color: red;
}
input[readonly] {
    background-color: white;
}

JavaScript

$("input").on("click", function (event) {
    //If clicked, remove '.selected' from whoever currently has it as well as add readonly (in case someone clicks on another before pressing Enter or Esc to finish edit).
    $(".selected").removeClass("selected").attr('readonly', 'readonly'); 
    $(this).addClass("selected").focus(); //Add selected to the clicked one
}).keydown(function (event) {
    var key = event.keyCode || event.which;
    console.log(key);
    
    //If it's readonly, then you can move around
    if ($(this).attr('readonly') == "readonly") { 
        if (key == 39) $(this).removeClass("selected").closest('td').next().find('input').addClass("selected").focus();
        else if (key == 37) $(this).removeClass("selected").closest('td').prev().find('input').addClass("selected").focus();
        else if (key == 40) $(this).removeClass("selected").closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').addClass("selected").focus();
        else if (key == 38) $(this).removeClass("selected").closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').addClass("selected").focus();
    }

    //If F2 was pressed
    if (key == 113) { //F2
        //Remove readonly, allow to be edited and block moving arrows (you ca use arrows to navigate through letters, like a normal input
        $(this).prop('onclick', null).removeAttr('readonly');
    } else if (key == 13 || key == 27) { //ENTER or ESC
        //Put readonly back, allow to move around
        $(this).attr('readonly', 'readonly'); 
    }
    
});