Question 281980 in Html Question posted in
Some basic documentation can be found here.

Html – Focus element which appears on focus of some other element on tab press

I have a table with multiple table rows (tr elements). When I hover or focus on a table row, an actions menu button appears. If I navigate to a table row using the tab key, I can see the actions menu button. However, when I press the tab again, the focus is lost on the table row, causing the actions menu button to disappear. Is there a way to ensure that when I press the tab again, the focus shifts directly to the actions menu button?

Tags:

2

Answers


  1. 0

    you can use Attribute Tabindex

    <table>
    <thead>
        <tr tabindex="1">
            <th>title 1</th>
            <th>title 2</th>
            <th>title 3</th>
            <th>title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr tabindex="2">
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr tabindex="3">
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
        <tr tabindex="4">
            <td>item</td>
            <td>item</td>
            <td>item</td>
            <td>item</td>
        </tr>
    </tbody>
</table>
    Login or Signup to reply.
  2. 0 
    <table>
  <tr tabindex="1" onfocus="showActionsMenu(this)">
    <td>Table Content</td>
  </tr>
  <tr tabindex="2" onfocus="showActionsMenu(this)">
    <td>Table Content</td>
  </tr>
  <!-- Other table rows... -->
</table>

<!-- Actions menu button associated with the first table row -->
<button tabindex="3">Actions Menu</button>

<script>
  function showActionsMenu(row) {
    // Logic to display the actions menu based on the focused row
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search