5

Tentei criar uma tabela vazia para que quando o usuário clica-se no meio do campo <td> aparece um <input type="text" /> para digitar.

Segue o código:

$(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>

Gostaria que ao termino da digitação o usuário tive-se a possibilidade de mover o cursor para o próximo <input type="text" /> da <td> seguinte através de um enter ou tab, porém não consegui disponibilizar esssa funcionalidade para o usuário.

3 Respostas 3

4

Criei um método para mudar o foco e coloquei a chamada do método no <input /> criado dinamicamente.

<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>

0

1- use data-index no input para dar ordem de mudança para próximo

<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();
    }
});
0

Explicação

Entendi que o que você quer seria algo similar a edição de grid via campos em tabela.

Desta forma seria melhor uma solução se atendo a este conceito de Grid, por isso criei uma solução personalizada ao teu caso.

Código

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .