Javascript 管理HTML表的焦点

以下代码是侧栏中的一个选定项：

<table cellpadding="0" cellspacing="0" border="0" align="left">
   <tr>
      <td valign="top">
         <ul class="mainsidebar">
            <li class="mainsidebarli">
               <table cellpadding="1" cellspacing="0" border="0" width="100%">
                  <tr>
                     <td class="sidebarIcon" valign="middle"><a class="sidebarLink" href="list.jsp"><img src="/images/sidebar/residents.png" width="28" height="28" border="0" hspace="0" vspace="0"/></a></td>
                     <td class="sidebarLabel" valign="middle"><a class="sidebarLink" href="list.jsp">The List</a></td>
                  </tr>
               </table>
            </li>
         </ul>
      </td>
   </tr>
</table>

mainsidebar是应用程序的主要右侧导航。当前，当鼠标悬停在列表项中的一个表上时，由于jQuery和CSS，整个表的样式都会发生变化

使用tab键浏览此侧栏时出现问题。目前，重点放在最里面的表中的每个href上。所需的效果是表格本身获得键盘焦点，以便它可以提供鼠标悬停时看到的相同颜色变化，并允许键与单击任一链接相同

---

如何做到这一点？

您可以通过向表中添加一个

tabindex

使表成为焦点

这适用于Chrome、Firefox、Opera和Safari

要使其在IE中工作，您可以添加一点jQuery：

$('td,th').on('focus',
  function() {
    $(this).closest('table').focus()
  }
)

---

例如：

我认为你无法对焦一张桌子。这里有一些好消息