Member Avatar for anish.anick

Hi All,
Is there any way to set the focus to a table row using javascript so that subsequent key press events can iterate through the table rows.Please help me to solve this.

Thanks

  • 4 Contributors
  • 3 Replies
  • 404 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Good pointers from , , and . A practical, modern pattern is to make rows actually focusable, handle keyboard navigation with a single keydown listener on the table (event delegation), and update both visual state and ARIA state so keyboard and assistive‑technology users get consistent feedback. Below is a minimal, robust example and a few compatibility/accessibility notes.

HTML (make each row focusable and give a selection state):

<table>
  <tr tabindex="0" role="row" aria-selected="false"><td>Row 1</td></tr>
  <tr tabindex="0" role="row" aria-selected="false"><td>Row 2</td></tr>
  <tr tabindex="0" role="row" aria-selected="false"><td>Row 3</td></tr>
</table>

JavaScript (event delegation, ArrowUp/ArrowDown to move focus and update aria-selected):

const table = document.querySelector('table');
table.addEventListener('keydown', e => {
  const row = document.activeElement.closest('tr[tabindex]');
  if (!row) return;
  if (e.key === 'ArrowDown') {
    const next = row.nextElementSibling;
    if (next && next.matches('tr[tabindex]')) {
      next.focus();
      row.setAttribute('aria-selected','false');
      next.setAttribute('aria-selected','true');
    }
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    const prev = row.previousElementSibling;
    if (prev && prev.matches('tr[tabindex]')) {
      prev.focus();
      row.setAttribute('aria-selected','false');
      prev.setAttribute('aria-selected','true');
    }
    e.preventDefault();
  }
});

Notes and troubleshooting: prefer keydown (not keypress) for non-printable keys; use tabindex="0" if rows should be tabbable, or tabindex="-1" if only programmatic arrow navigation is desired. Some very old browsers don’t focus certain non-interactive elements; if that occurs, place tabindex on the first <td> or include a small focusable element (link/button) inside the row. Ensure focus styles are visible (don’t remove outlines without replacing them) and retest with keyboard-only navigation and a screen reader. For complex grid behaviors, follow the ARIA grid/listbox patterns.

Recommended Answers

All 3 Replies

Member Avatar for R0bb0b

Hi All,
Is there any way to set the focus to a table row using javascript so that subsequent key press events can iterate through the table rows.Please help me to solve this.

Thanks

Only things that can accept focus can receive focus, which would be form objects like text boxes, radio buttons etc... and hyperlinks. You should be able to do it with the focus() function.

Member Avatar for nikesh.yadav

for IE and FF You can set focus to object and embed respectively.but i m not sure about other browser

Member Avatar for Troy III

Hi All,
Is there any way to set the focus to a table row using javascript so that subsequent key press events can iterate through the table rows.Please help me to solve this.

Thanks

As nikesh.yadav already pointed, there are only two true conventional browsers that will handle focus as expected for elements other anchors and forms for certain. That is, IE and FX.

You can write a loop function that iterates through table elements that should receive focus and use a declaration like: tag[i].tabIndex = "auto"; to make them receive focus. This additionally prevents you from breaking the tab order on your document.

It will enable your client to tab through your table rows, cells and/or other desired elements the conventional way, (or browser specific), without having to explain that there are keys with added functionality and how to use them.

Regards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.