Question

我正在使用Datatable，我在on上实现了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');

   }

Answer 2

修复！这是我现在的代码： $（'＃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

      }
  })

我知道这不是最好的代码，但至少它可以工作：）

DataTable选择带有keydown的扩展/导航

2 个答案: