DataTable keydownを使用した内線/ナビゲーションの選択

Question

私はDatatableを使用していますが、Select（）拡張を実装しています。ユーザーがkeyupとkeydownでテーブルをナビゲートできるようにする関数を実装したいのですが、私はそれをどうやって行うことができるのか分かりません。 は、私はこれを試してみましたが、唯一の仕事を削除：

$('#example tbody').on('click', 'tr', function() { 
      var tr = $(this); 
      if ($(this).hasClass('selected')) { 
       $(this).removeClass('selected'); 
      } 
      else { 
       table.$('tr.selected').removeClass('selected'); 
       $(this).addClass('selected'); 
      }   
      //on keypress within tr 
      $(document).keydown(function(e) { 
      var tabla = document.getElementById("example"); 
      var fila = tabla.getElementsByClassName('odd selected'); 
      var fila2 = tabla.getElementsByClassName('even selected'); 
      if (e.keyCode == 40){ //arrow down 
       tr.next().addClass('selected'); 
       table.$('tr.selected').removeClass('selected'); 
      } 
      if (e.keyCode == 38){ //arrow up 
       tr.prev().addClass('selected'); 
       table.$('tr.selected').removeClass('selected'); 
       } 
      }) 
     }); 

誰も私を助けることができますか？

EDIT：これは私のHTML

<button id="addRow">Insertar fila</button> 
<button id="saveData">Guardar datos</button> 
<div id="dynamic"> 
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" width="100%" id="example"> 
     <thead> 
      <tr> 
       <th width="10%">NIF/NIE</th> 
       <th width="10%">1er Apellido</th> 
       <th width="10%">2do Apellido</th> 
       <th width="10%">Nombre</th> 
       <th width="10%">Sexo</th> 
       <th width="10%">Fecha Nacimiento</th> 
       <th width="10%">Fecha Contrato</th> 
       <th width="10%">Demandante empleo larga duración</th> 
       <th width="10%">Tipo Contrato</th> 
       <th width="10%">% Jornada</th> 
       <th width="10%">Discap.</th> 
       <th width="10%">Causas Archivo. (1)</th> 
       <th width="10%">Aut. SCSP</th> 
       <th width="10%">Imp.Solic.</th> 
       <th width="10%">Sust.</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

ある行は削除してselectedクラスを追加するので、私はアヤックス

Answer 1

FIXED！これが今の私のコードです：。 $（「＃例のTBODY」）（「クリック」、「TR」、機能（）{

var tr = $(this); 
    if ($(this).hasClass('selected')) { 

     $(this).removeClass('selected'); 
    } 
    else { 
     table.$('tr.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
    } 

//on keypress within tr 
    $(document).keydown(function(e) { 


     if (e.keyCode == 40){ //arrow down 

      table.$('tr.selected').removeClass('selected'); 
      tr.next().addClass('selected'); 
      tr = table.$('tr.selected'); //This was what i needed 

     } 
     if (e.keyCode == 38){ //arrow up 
      table.$('tr.selected').removeClass('selected'); 
      tr.prev().addClass('selected'); 
      tr = table.$('tr.selected'); // again here 

     } 
    }) 

に私は、これが最良のコードではありません知っているが、少なくとも、それは動作します:)

Answer 2

を使用してデータを追加してい逆の順序である必要があり、ここにありますあなたのコードで変更する必要があるもの

if (e.keyCode == 40){ //arrow down 

     // original lines 
     //tr.next().addClass('selected'); 
     //table.$('tr.selected').removeClass('selected'); 

     // new lines, with order changed 
     table.$('tr.selected').removeClass('selected'); 
     tr.next().addClass('selected'); 

    } 
    if (e.keyCode == 38){ //arrow up 

     // same here switch the lines 
     table.$('tr.selected').removeClass('selected'); 
     tr.prev().addClass('selected'); 

    }