M.Gea M.Gea - 2 years ago 125
Javascript Question

DataTable Select Extension / Navigation with keydown

i'm using Datatable and i have implemented the Select() extension on in, and i want to implement a function that allow the user to navigate on the table with keyup and keydown, but i don't know how can i do that.
I tried this, but only remove work:

$('#example tbody').on( 'click', 'tr', function () {
var tr = $(this);
if ( $(this).hasClass('selected') ) {
else {
//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
if (e.keyCode == 38){ //arrow up
} );

Can anyone help me?

EDIT: this is my 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">
<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>

i'm adding by ajax the datas.

Answer Source

Because the lines to remove and add selected class should be in opposite order, here is what needs to be changed in your code

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

       // original lines

       // new lines, with order changed

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

       // same here switch the lines

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download