Select / Navigation with keydown

Gea

Hello, i have implemented the Select() extension on my DataTable 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 have thought on row.index() but that won't work.
Can anyone help me?

Gea

i Tried this, but only remove the remove work:

$('#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');
            }
        })

  } ); 

Gea

I changed my code, and now work but only with the just above and just below row :
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');

}

Gea

Fixed! this is what i did:
$('#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');
     var trnuevo = tr.next().addClass('selected');
     tr = table.$('tr.selected'); // this is what i needed

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

      }
  })

allan

Details on how to format code are available here.

Don't add and remove the selected class - instead, use the row().select() and row().deselect() methods. Details on these methods are available here.

Allan

Gea

Oh, i will look!
Thanks Allan.
Gea.