DataTable按下键选择扩展/导航

DataTable Select Extension / Navigation with keydown

本文关键字:扩展 导航 选择 DataTable      更新时间:2023-09-26

我正在使用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');
                }
            })
      } ); 

有人能帮我吗?

编辑:这是我的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 添加数据

因为要删除和添加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');
   }

固定!这是我现在的代码:$('#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) {

      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
      }
  })

我知道这不是最好的代码,但至少它能工作:)