キーと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コードの項目throughtナビゲートするために：

$(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); 
}); 

複数のテーブルがある場合、私は1つのテーブルのみを持っていますがない場合、これは正常に動作します。 インデックスの長さが正しく（この例では9）、ナビゲーションは完全にチャートから外れています。最初のアイテムのように-1であると、他のすべてが嫌な行動をします。私は通常2〜4のアイテムをナビゲートすることができますが、2番目のアイテムに上がったときには最後にジャンプします...なぜか分かりません。

私はここで、このために一緒にjsfiddelを置く：私は間違ってあなたの要件を理解することができるhttps://jsfiddle.net/vog54ygo/6/

Answer 1

を、私はあなたがoverthought答えを持っていると思います。

これは必要なものですか？

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>