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>

使用键和jquery

1 个答案: