javascript - 按下侧箭头时将焦点设置到下一个输入类型

Question

如何跳过 td 中隐藏的输入类型并将焦点设置到下一个可见的输入类型

这是供您引用的表格

HTML:

<table border="1" cellspacing="0" id="vitProb">
  <tbody>
    <tr>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus0 ">
      </td>
      <td>
        <label id="" class="centerlabeltext">0</label>
        <input type="hidden" name="" id="" class="" value="0">
      </td>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus1 ">
      </td>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus2 ">
      </td>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus4 ">
      </td>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus5 ">
      </td>
      <td>
        <input type="text" name="" value="" id="" class="unitfocus6 ">
      </td>
    </tr>
  </tbody>
</table>

这里是js代码:

$(document).delegate('table#vitProb tbody tr td input ' ,"keydown",function(e) {

  // get the code of the key that was pressed
  var code = e.keyCode ? e.keyCode : e.which;

  // varify that  side key was pressed
  if (code === 39) {

    // get the next tr's input field, and set focus to it
    var c=this.className;
    var a=c.split("");
    var m=a[9];

    if(isNaN(m))
    {   m=0;}
    else
    {m=parseInt(m)+1;}

    var n="unitfocus"+m;

    $(this).closest('td').next().find('input[text].'+n+'').focus();

    return false;
  }
  else if (code === 37) {

    // get the next tr's input field, and set focus to it
    var c=this.className;
    var a=c.split("");
    var m=a[9];
    m=parseInt(m)-1;
    if(m==0){m=0;}else{m;}
    ;
    var n="unitfocus"+m;

    $(this).closest('td').prev().find('input.'+n+'').focus();

    // prevent any default actions
    return false;
  }
});

如图所示，从第 1 年到第 5 年，下一个箭头在第一个 tr 中有效，但在第一个 tr 中，箭头键从共享到第一年不起作用

I Unit column td里面有隐藏的input type和label

我认为因为隐藏字段箭头键从共享到第 1 年不起作用

如何跳过隐藏字段并转到下一个可见输入类型。

Answer 1

您已经确定了下一个和上一个元素的类名。 无需调用 next() 或 prev() 方法。 这是一个 JSFiddle，其中首先选择了父 tr，然后是具有正确类的底层 td:

http://jsfiddle.net/av6abz0f/

这是我更改的行:

$(this).parents('tr').find('input.'+n+'').focus();