javascript - 数据表通过按键选择扩展/导航

Question

我正在使用 Datatable，并且我已经在 in 上实现了 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');
                }
            })
      } ); 

有人可以帮助我吗？

编辑:这是我的 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>

我正在使用 ajax 添加数据

Answer 1

因为删除和添加 selected 类的行应该按相反的顺序，所以以下是代码中需要更改的内容

 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');

   }