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

Question

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

Navigation

#1 by (5 votes)
#2 by (0 votes)
#3 by (0 votes)

5

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

Follow 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><tableborder="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 would like the user to move the cursor to the next <input type="text" /> of the <td> following at the end of the typing by means of a enter or tab , but I was not able to make this functionality available to the user. user.

javascript jquery

asked by anonymous 07.12.2017 / 12:37

3 answers

0

1- Use data-index in input to give change 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();
    }
});

07.12.2017 / 13:26

0

Explanation

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

So this would be a better solution if you stick to this Grid concept, so I've created a custom solution for you.

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><tableborder="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>

07.12.2017 / 15:06

Pass arguments to the property getter Calculate how long a car has been parked

score 5 · Accepted Answer

I created a método to change the focus and put the call of método in <input /> created dynamically.

<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><trclass="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>