javascript - 使用键和 jquery 在不同表中移动 tr

Question

我想使用向上和向下箭头在表格行中移动。我有这个标记:

<table border="1">
<tr class="tableIndex highlight">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table> 
<table border="1">
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table>
<table border="1">
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table>

这个 jQuery JavaScript 代码用于浏览项目:

$(function() {
function highlighting(tableIndex,className) {
    // Just a simple check. If .highlight has reached the last, start again
    var $trClass = $('.'+className);
    if( (tableIndex+1) > $trClass.length ) {
      console.log('tableIndex > '+ $trClass.length);
      tableIndex = 0;
    }

    // Element exists?
    if($trClass.eq(tableIndex).length > 0)
    {
      // Remove other highlights
      $trClass.removeClass('highlight');

      // Highlight your target
      $trClass.eq(tableIndex).addClass('highlight');
    }
  }
  $(document).keydown(function (e) {
    //first check if any input has focus
    if($('input:focus').length == 0) {
      switch (e.which) {
        case 38:
          //ARROW UP - move up
          console.log('Current (up): ' + $('.tableIndex').index());
          highlighting(($('.tableIndex.highlight').index() - 1), 'tableIndex');
          break;
        case 40:
          console.log('Current (down): ' + $('.tableIndex').index());
          highlighting(($('.tableIndex.highlight').index() + 1), 'tableIndex');
          break;
      }
    }
  })
  console.log('Total: ' + $('.tableIndex').length);
});

如果我只有一张表，这可以正常工作，但如果有多个表，则不行。索引的长度是正确的(如本例中的 9)，但导航完全超出了图表。就像第一项是-1，然后其他一切都表现得很疯狂。我可以正常浏览第 2-4 项，但当我转到第二项时，它会跳到最后一项...我只是不知道为什么？

我在这里放置了一个 jsfiddel:https://jsfiddle.net/vog54ygo/6/

Answer 1

我可能错误地理解了您的要求，但我认为您的答案是经过深思熟虑的。

这是你想要的吗？

var $rows = $(".tableIndex");
var current = 0;

$(function() {
 
  $(document).keydown(function (e) {
 
      switch (e.which) {
        case 38: //ARROW UP - move up
          if(current > 0){
           $rows[current].setAttribute("class", "");
           $rows[current - 1].setAttribute("class", "highlight");
           current--;
          }
          break;
        case 40:
          if(current <  $rows.length-1){
           $rows[current].setAttribute("class", "");
           $rows[current + 1].setAttribute("class", "highlight");
           current++;
          }
          break;
      }
  });
  

});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr class="tableIndex highlight">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table>

<table border="1">
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table>

<table border="1">
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
<tr class="tableIndex">
  <td>Something</td>
  <td>Something</td>
  <td>Something</td>
</tr>
</table>