强制 Table 向下导航行然后跨到下一列

Question

我有一个 table，行数 X，最多 5 列。用户将在第 1 行第 2 列中输入值，然后我需要将它们导航到第 2 行第 2 列以输入下一个值。当他们位于第 2 列的最后一行时，他们需要转到第 2 行第 3 列，依此类推。他们正在输入具有指定小数位数的数值。一旦他们输入了适当的小数位数，我需要根据上述逻辑强制他们进入下一个 row/column。

我已经设置了 tabIndex 以便它给我想要的效果。我将光标放在第一行第 2 列并按 tab，然后它向下移动到下一列，因此按 tabKey 有效：

<tr class="calibrateColumns">
    <td>1</td>
    <td class="CalCol1" contenteditable="true" data-val="false" tabindex=51></td>
    <td class="CalCol2" contenteditable="true" data-val="false" tabindex=52></td>
    <td class="CalCol3" contenteditable="true" data-val="false" tabindex=53></td>
    <td class="CalCol4" contenteditable="true" data-val="false" tabindex=54></td>
    <td class="CalCol5" contenteditable="true" data-val="false" tabindex=55></td>
 </tr>
 <tr class="calibrateColumns">
    <td>2</td>
    <td class="CalCol1" contenteditable="true" data-val="false" tabindex=51></td>
    <td class="CalCol2" contenteditable="true" data-val="false" tabindex=52></td>
    <td class="CalCol3" contenteditable="true" data-val="false" tabindex=53></td>
    <td class="CalCol4" contenteditable="true" data-val="false" tabindex=54></td>
    <td class="CalCol5" contenteditable="true" data-val="false" tabindex=55></td>
  </tr>

我有一个函数正在检查适当的小数位数，当他们输入最后一个小数点时，它会使当前列变为只读，然后我想将它们发送到下一个可用的 row/column。这就是问题所在，因为它总是将用户发送到同一行的下一列，因此它先水平导航，然后垂直向下导航。

这是我的函数，用于检查输入的小数位数（输入是对象 - td 传递给此函数）：

if ((input.html().length - input.html().indexOf(".") - 1) == dec_places) {
      $.tabNext();    //force user to next row.column  using jquery.tabbable plugin              
      input.attr("contenteditable", false);  //set field readonly                 
}

我已经尝试了所有我能想到的方法，包括我目前正在使用的 jquery.tabbable 库，所有内容都先水平然后垂直导航，而不是 tabindex 指定的内容。同样，如果我只是通过 table 选项卡（按 tabKey）然后它会垂直然后水平导航。但是如果我尝试以编程方式将它们发送到下一个元素，事情就会发生 horizontally/vertically.

Answer 1

您可以检查是否存在 next tr 如果是则只需使用 input.closest("tr").next().find("[tabindex=" + tabs + "]").focus() 即：到 td 其中 tabindex 相同，如果不存在则获取 td[contenteditable=true]:first tabindex 值并使用它来关注所需的 td。

演示代码 :

var dec_places = 2;
$(".calibrateColumns > td[contenteditable]").on("keyup", function() {

  var input = $(this)
  var tabs = input.attr("tabindex") //get tab index
  if ((input.html().length - input.html().indexOf(".") - 1) == dec_places) {

    input.attr("contenteditable", false); //set field readonly 
    //if there is next tr exist
    if (input.closest("tr").next().length) {
      //put focus on td in next tr where tabindex is same
      input.closest("tr").next().find("[tabindex=" + tabs + "]").focus()

    } else {
      //check the conteneditable is true get first one tabindex
      var tab_new = $("table tr:first td[contenteditable=true]:first").attr("tabindex")
      //put foucs thre
      $("table tr:eq(0) td[tabindex=" + tab_new + "]").focus()

    }
  }


})

td {
  width: 100px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr class="calibrateColumns">
    <td>1</td>
    <td class="CalCol1" contenteditable="true" data-val="false" tabindex=51></td>
    <td class="CalCol2" contenteditable="true" data-val="false" tabindex=52></td>
    <td class="CalCol3" contenteditable="true" data-val="false" tabindex=53></td>
    <td class="CalCol4" contenteditable="true" data-val="false" tabindex=54></td>
    <td class="CalCol5" contenteditable="true" data-val="false" tabindex=55></td>
  </tr>
  <tr class="calibrateColumns">
    <td>2</td>
    <td class="CalCol1" contenteditable="true" data-val="false" tabindex=51></td>
    <td class="CalCol2" contenteditable="true" data-val="false" tabindex=52></td>
    <td class="CalCol3" contenteditable="true" data-val="false" tabindex=53></td>
    <td class="CalCol4" contenteditable="true" data-val="false" tabindex=54></td>
    <td class="CalCol5" contenteditable="true" data-val="false" tabindex=55></td>
  </tr>
</table>

强制 Table 向下导航行然后跨到下一列

Forcing Table Navigation Down Rows Then Across To Next Column

javascript

html

jquery

asp.net-mvc-4