HTML table rows navigate by keyboard in JQuery

Question

I have a HTML table which is created by Ajax. Rendered markup of this table as below:

<table class="table" id="tbl_byKeyboard">
  <thead>
    <tr>
      <th>#</th>
      <th>Date</th>
      <th>Customer</th>
      <th>Discount</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <input type="radio" name="bid" value="122">
      </td>
      <td>2022-10-01</td>
      <td>Customer 01</td>
      <td>10%</td>
      <td>1000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="123">
      </td>
      <td>2022-10-01</td>
      <td>Customer 02</td>
      <td>10%</td>
      <td>2000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="124">
      </td>
      <td>2022-10-01</td>
      <td>Customer 03</td>
      <td>10%</td>
      <td>3000.00</td>
    </tr>
  </tbody>
</table>

Using this table, basically I want to navigate the table row using 'up' and 'down' arrow key on keyboard. After selecting the right row, the user should be able to check the radio button (within the selected row) by pressing the enter key.

This is my jQuery code sofar :

$(document).ready(function() {
  $(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
    var inp = this.querySelector('input')
    if (inp == null) return

    if (e.target.tagName != "INPUT") {
      inp.checked = !inp.checked
    }

    $('#tbl_byKeyboard tbody tr').removeClass('active');
    $(this).addClass('active');
  })
});


$(window).on('keydown', tbl_navigate)


function tbl_navigate(e) {
  var $tbl = $('#tbl_byKeyboard');
  var $cur = $('.active', $tbl).removeClass('active').first();

  if (e.keyCode === 40) { //down
    if ($cur.length) {
      $cur.next().addClass('active');
    } else {
      $tbl.children().first().addClass('active');
    }
  } else if (e.keyCode == 38) { //up
    if ($cur.length) {
      $cur.prev().addClass('active');
    } else {
      $tbl.children().last().addClass('active');
    }
  } else if (e.keyCode == 13) { //enter 
    var $this = $cur;
    var inp = $this.find('input')
    if (inp == null) return

    if (inp.is(':checked')) {
      inp.prop('checked', false);
    } else {
      inp.prop('checked', true);
      $('#tbl_byKeyboard tbody tr').removeClass('active');
      $this.addClass('active');
    }
  }
}

Stack snippet:

$(document).ready(function() {
  $(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
    var inp = this.querySelector('input')
    if (inp == null) return

    if (e.target.tagName != "INPUT") {
      inp.checked = !inp.checked
    }

    $('#tbl_byKeyboard tbody tr').removeClass('active');
    $(this).addClass('active');
  })
});


$(window).on('keydown', tbl_navigate)


function tbl_navigate(e) {
  var $tbl = $('#tbl_byKeyboard');
  var $cur = $('.active', $tbl).removeClass('active').first();

  if (e.keyCode === 40) { //down
    if ($cur.length) {
      $cur.next().addClass('active');
    } else {
      $tbl.children().first().addClass('active');
    }
  } else if (e.keyCode == 38) { //up
    if ($cur.length) {
      $cur.prev().addClass('active');
    } else {
      $tbl.children().last().addClass('active');
    }
  } else if (e.keyCode == 13) { //enter 
    var $this = $cur;
    var inp = $this.find('input')
    if (inp == null) return

    if (inp.is(':checked')) {
      inp.prop('checked', false);
    } else {
      inp.prop('checked', true);
      $('#tbl_byKeyboard tbody tr').removeClass('active');
      $this.addClass('active');
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table" id="tbl_byKeyboard">
  <thead>
    <tr>
      <th>#</th>
      <th>Date</th>
      <th>Customer</th>
      <th>Discount</th>
      <th>Total</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>
        <input type="radio" name="bid" value="122">
      </td>
      <td>2022-10-01</td>
      <td>Customer 01</td>
      <td>10%</td>
      <td>1000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="123">
      </td>
      <td>2022-10-01</td>
      <td>Customer 02</td>
      <td>10%</td>
      <td>2000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="124">
      </td>
      <td>2022-10-01</td>
      <td>Customer 03</td>
      <td>10%</td>
      <td>3000.00</td>
    </tr>
  </tbody>
</table>

My problem is, with this code I can navigate table rows using 'up' and 'down' arrow key, but enter key not working for me.

Hope somebody may help me to figure this out.

score 1 · Accepted Answer · answered Oct 26 '22 at 13:10

The problem is, that at the beginning of your keydown handler you remove the class active:

var $cur = $('.active', $tbl).removeClass('active').first();

But in the if for the Enter case you don't set that class again, when the input is checked:

if (inp.is(':checked')) {
  inp.prop('checked', false);
}

Furthermore the manipulation of the class isn't necessary in the Enter case - it's only important for the Up and Down keys. Therefor you should remove the active class only in these two cases:

var $cur = $('.active', $tbl).first();

if (e.keyCode === 40) { //down
  $cur.removeClass('active');
  ...
} else if (e.keyCode == 38) { //up
  $cur.removeClass('active');
  ...
}

Because the removal for the Enter case isn't necessary, you can omit it there:

if (inp.is(':checked')) {
  inp.prop('checked', false);
} else {
  inp.prop('checked', true);
}

Working example:

i added a small line to focus the first radiobutton for demonstration:

$('#tbl_byKeyboard input[type=radio]').eq(0).focus();

$(document).ready(function() {
  $('#tbl_byKeyboard input[type=radio]').eq(0).focus();

  $(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
    var inp = this.querySelector('input')
    if (inp == null) return

    if (e.target.tagName != "INPUT") {
      inp.checked = !inp.checked
    }

    $('#tbl_byKeyboard tbody tr').removeClass('active');
    $(this).addClass('active');
  })
});


$(window).on('keydown', tbl_navigate)


function tbl_navigate(e) {
  var $tbl = $('#tbl_byKeyboard');
  var $cur = $('.active', $tbl).first();

  if (e.keyCode === 40) { //down
    $cur.removeClass('active');
    
    if ($cur.length) {
      $cur.next().addClass('active');
    } else {
      $tbl.children().first().addClass('active');
    }
  } else if (e.keyCode == 38) { //up
    $cur.removeClass('active');
    
    if ($cur.length) {
      $cur.prev().addClass('active');
    } else {
      $tbl.children().last().addClass('active');
    }
  } else if (e.keyCode == 13) { //enter 
    var $this = $cur;
    var inp = $this.find('input')
    if (inp == null) return

    if (inp.is(':checked')) {
      inp.prop('checked', false);
    } else {
      inp.prop('checked', true);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table" id="tbl_byKeyboard">
  <thead>
    <tr>
      <th>#</th>
      <th>Date</th>
      <th>Customer</th>
      <th>Discount</th>
      <th>Total</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>
        <input type="radio" name="bid" value="122">
      </td>
      <td>2022-10-01</td>
      <td>Customer 01</td>
      <td>10%</td>
      <td>1000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="123">
      </td>
      <td>2022-10-01</td>
      <td>Customer 02</td>
      <td>10%</td>
      <td>2000.00</td>
    </tr>

    <tr>
      <td>
        <input type="radio" name="bid" value="124">
      </td>
      <td>2022-10-01</td>
      <td>Customer 03</td>
      <td>10%</td>
      <td>3000.00</td>
    </tr>
  </tbody>
</table>

One more thing to clarify with you. This is regarding enter key press. May I know is there a way to attached 2 events for key press. I mean one event on first key press and second one on second key press. (like double click). In this case I want to check the radio btn on first key press and if user press again I need to set a modal to open.. Is it possible? — ugsgknt, Oct 27 '22 at 06:57
Which key combination do you want to use? If it's a combination with a function key (ALT, CTR, SHIFT), it's easy... — biberman, Oct 27 '22 at 08:42
For example you could use for a combination with the ``CTRL`` key: ``if (e.keyCode == 13 && e.ctrlKey)``. For nonfuncional keys maybe the following link is helpfull: https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript — biberman, Oct 27 '22 at 08:55
Lets think one event for `enter` key and other event for `ctrl+enter`. Then how I modify `ifelse` code above? — ugsgknt, Oct 27 '22 at 11:01
You could do it with a nested If:``if (e.keyCode == 13) { if (e.ctrlKey) {your code for ctrl+enter} else {your original code from above}`` — biberman, Oct 27 '22 at 11:12

HTML table rows navigate by keyboard in JQuery

1 Answers1