A CodePen by Josh Einstein. Keyboard Navigation in Table Cells - Uses jQuery to enable arrow key functionality in tables. Pressing up/down/left/right in input fields will move focus to adjacent cells. Doesn't currently deal with column spans or custom input scenarios such as on-the-fly input fields.

index.html

<table id="people">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Phone Number</th>
    <th>Location</th>
  </thead>
  <tbody>
    <tr>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
    </tr>
    <tr>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
    </tr>
    <tr>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
    </tr>
    <tr>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
    </tr>
    <tr>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
    </tr>
  </tbody>
</table>

script.js

(function ($) {
  
    $.fn.enableCellNavigation = function () {

        var arrow = { left: 37, up: 38, right: 39, down: 40 };

        // select all on focus
        this.find('input').keydown(function (e) {

            // shortcut for key other than arrow keys
            if ($.inArray(e.which, [arrow.left, arrow.up, arrow.right, arrow.down]) < 0) { return; }

            var input = e.target;
            var td = $(e.target).closest('td');
            var moveTo = null;

            switch (e.which) {

                case arrow.left: {
                    if (input.selectionStart == 0) {
                        moveTo = td.prev('td:has(input,textarea)');
                    }
                    break;
                }
                case arrow.right: {
                    if (input.selectionEnd == input.value.length) {
                        moveTo = td.next('td:has(input,textarea)');
                    }
                    break;
                }

                case arrow.up:
                case arrow.down: {

                    var tr = td.closest('tr');
                    var pos = td[0].cellIndex;

                    var moveToRow = null;
                    if (e.which == arrow.down) {
                        moveToRow = tr.next('tr');
                    }
                    else if (e.which == arrow.up) {
                        moveToRow = tr.prev('tr');
                    }

                    if (moveToRow.length) {
                        moveTo = $(moveToRow[0].cells[pos]);
                    }

                    break;
                }

            }

            if (moveTo && moveTo.length) {

                e.preventDefault();

                moveTo.find('input,textarea').each(function (i, input) {
                    input.focus();
                    input.select();
                });

            }

        });

    };
  
})(jQuery);

$(function() {
  $('#people').enableCellNavigation();
});

style.less

#people {
  
  border-collapse: collapse;
  margin: 5px;
  
  th {
    background-color: #ccc;
    color: #000;
    font-weight: normal;
  }
  
  td, th { 
    border: 1px solid #ccc;
    margin: 0;
    padding: 4px;
  }
  
}

Worked perfectly. Thanks for this!

Hey! Just tried this out and it seems to work fine!

One question though. I am dynamically adding rows to my table, and while i can navigate to them, i cannot navigate away from them.

How could i fix this?

This is what I've been looking for better than a year. Could never figure it out. Thank you!