如何为AngularJS生成的表格<tr>行添加焦点状态？

嘿，我来帮你拆解下问题：你的hover效果正常，但:focus完全没反应，核心原因是**标签默认是不能获得焦点的**！浏览器只会让表单控件、链接这类天生可交互的元素，或者手动设置了tabindex属性的元素触发:focus状态，普通不在这个范围内，所以你点击它的时候根本不会触发:focus样式，只有控制台强制模拟:focus状态时才会生效。

至于你用jQuery加active类无效，大概率是因为AngularJS的ng-repeat是动态生成DOM的，如果你在页面加载完成后直接绑定点击事件，那些后续生成的根本没被绑定到事件上。

下面给你几个可行的解决方案，按需选择：

方案一：让可聚焦，修复:focus样式 #

给每个动态生成的加上tabindex="0"，让它变成可聚焦元素，这样点击时就能触发:focus状态了：

修改后的HTML代码 #

<table class="my_table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Celphone</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts" tabindex="0">
      <td>{{contact.Name}}</td>
      <td>{{contact.Address}}</td>
      <td>{{contact.Celphone}}</td>
    </tr>
  </tbody>
</table>

tabindex="0"表示元素可以通过点击或Tab键聚焦，并且遵循页面的自然聚焦顺序，不会打乱原有交互逻辑。

优化体验：移除默认聚焦轮廓 #

如果不想让聚焦时出现浏览器默认的蓝色轮廓线，可以在CSS里加上：

.my_table tbody tr:focus {
  background-color: #f3f3f3;
  outline: none; /* 移除默认聚焦边框 */
}

方案二：用jQuery事件委托修复active类失效问题 #

之前的jQuery写法失效，是因为没有用事件委托处理动态生成的DOM。把事件绑定到静态存在的父元素（比如tbody）上，监听子元素的点击事件，这样后续生成的也能触发：

修改后的jQuery代码 #

// 事件委托：绑定到tbody，监听所有tr的点击
$('.my_table tbody').on('click', 'tr', function() {
  // 先移除其他tr的active类，再给当前点击的tr添加
  $('.my_table tbody tr').removeClass('active');
  $(this).addClass('active');
});

对应的CSS样式 #

.my_table tbody tr:hover {
  background-color: #7fccee;
}
.my_table tbody tr.active {
  background-color: #f3f3f3;
}

方案三：AngularJS原生实现（更推荐） #

既然你用的是AngularJS，完全可以用框架原生的指令和数据绑定来实现，避免jQuery和AngularJS的DOM操作冲突，代码也更优雅：

HTML修改 #

<tr 
  ng-repeat="contact in contacts" 
  ng-click="selectContact(contact)" 
  ng-class="{active: contact === selectedContact}"
>
  <td>{{contact.Name}}</td>
  <td>{{contact.Address}}</td>
  <td>{{contact.Celphone}}</td>
</tr>

控制器添加逻辑 #

// 在你的AngularJS控制器里添加以下代码
$scope.selectedContact = null;
$scope.selectContact = function(contact) {
  $scope.selectedContact = contact;
};

CSS样式和方案二一致 #

这种方式完全基于AngularJS的双向绑定，不需要手动操作DOM，更符合框架的设计理念。

内容的提问来源于stack exchange，提问作者Soul Eater