How do I call the next field of a table with Javascript or Jquery?

Question

I tried to create an empty table so that when the user clicks in the middle of the field <td> appears a <input type="text" /> to type.

Follows the code:

$(function () {
  $("td").click(function () {
      var conteudoOriginal = $(this).text();  
      $(this).addClass("celulaEmEdicao");
      $(this).html("<input type='text' value='" + conteudoOriginal + "' />");
      $(this).children().first().focus();
      $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
          var novoConteudo = $(this).val();
          $(this).parent().text(novoConteudo);
          $(this).parent().removeClass("celulaEmEdicao");
          $(this).parent().next();
        };
      });

      $(this).children().first().blur(function(){
          var novoConteudo = $(this).val();
          $(this).parent().text(novoConteudo);
          $(this).parent().removeClass("celulaEmEdicao");
          $(this).parent().next();
      });
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="0" cellspacing="0" width="968" style="border-collapse:collapse;table-layout:fixed;width:734pt">
  <tbody>
   <tr class="item" style="text-align: center;">
     <td class="cidade"></td>
     <th style="text-align: center;">JAN</th>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
 </tbody>
</table>

I wish that at the end of the typing the user had the possibility to move the cursor to the next <input type="text" /> of <td> through a enter or tab, but I could not provide this functionality to the user.

Answer 1

I created a método to shift focus and placed the call from método in the <input /> dynamically created.

<input type='text' onkeydown='MudaFoco($(this), event)' value='" + conteudoOriginal + "' />"

function MudaFoco(input, e){
    var code = e.keyCode || e.which;
    if (code == 13 || code == 9) { //Se for enter ou tab
        e.preventDefault();
        input.parent("td").next("td").click();
    }
}

$(function () {
  $("td").click(function () {
      var conteudoOriginal = $(this).text();  
      $(this).addClass("celulaEmEdicao");
      $(this).html("<input type='text' onkeydown='MudaFoco($(this), event)' value='" + conteudoOriginal + "' />");
      $(this).children().first().focus();
      $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
          var novoConteudo = $(this).val();
          $(this).parent().text(novoConteudo);
          $(this).parent().removeClass("celulaEmEdicao");
          $(this).parent().next();
        };
      });

      $(this).children().first().blur(function(){
          var novoConteudo = $(this).val();
          $(this).parent().text(novoConteudo);
          $(this).parent().removeClass("celulaEmEdicao");
          $(this).parent().next();
      });
      
  });  
});

function MudaFoco(input, e){
    var code = e.keyCode || e.which;
    if (code == 13 || code == 9) { //Se for enter ou tab
        e.preventDefault();
        input.parent("td").next("td").click();
    }
}

table {
  border: 1px solid;
}

table tr td{
  border: 1px solid;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr class="item" style="text-align: center;">
     <td class="cidade"></td>
     <th style="text-align: center;">JAN</th>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
</table>

Answer 2

1- use data-index in input to give shift order to next

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' />
<input type="text" name="Toode" class="my-input" data-index="2" />
<input type="number" name="Kogus" data-index="3" />

2-

$('#inputform').on('keydown', 'input', function (event) {
    if (event.which == 13) {
        event.preventDefault();
        var $this = $(event.target);
        var index = parseFloat($this.attr('data-index'));
        $('[data-index="' + (index + 1).toString() + '"]').focus();
    }
});

Answer 3

Explanation

I understood that what you want would be something similar to editing grid via table fields.

This way would be better a solution if I meet this concept of Grid, so I created a solution customized to your case.

Code

KEY_ENTER = 13;
KEY_TAB = 9;

$('table td').click(function(){
  var me = $(this),
      val = me.html(),
      input = geradorInput(val);
  
  iniciaEdicao(me, input);
});

function terminaEdicao(el){
  var me = $(el),
      parent = me.parent();
      
  parent.removeClass('cell-editing');
  parent.html(me.val());
}
function iniciaEdicao(el, input){
  var me = $(el);
  
  if (!me.hasClass('cell-editing')){
    me.html(input);
    me.find('input').focus();
  }
    me.addClass('cell-editing');
}
function proximoCampo(el){
  var me = $(el),
      parent = me.parent(),
      proxCampo = parent.nextAll('td').eq(0),
      inputProxCampo = geradorInput(proxCampo.html());
  
  iniciaEdicao(proxCampo, inputProxCampo);
}
function geradorInput(val){
  var input = $('<input>').attr({ type: 'text', value: val});
  
  input.keydown(function(event){
    switch(event.which){
    	case KEY_ENTER: {
        terminaEdicao(this);
        break;
      }
      case KEY_TAB: {
      	proximoCampo(this);
        terminaEdicao(this);
        break;
      }
    }
  });
  input.blur(function(){
    terminaEdicao(this);
  })
  return input;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="0" cellspacing="0" width="968" style="border-collapse:collapse;table-layout:fixed;width:734pt">
  <tbody>
   <tr class="item" style="text-align: center;">
     <td class="cidade"></td>
     <th style="text-align: center;">JAN</th>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
 </tbody>
</table>