小编Sou*_*ter的帖子

我有一个用AngularJS生成的表.
这是我的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">
            <td>{{contact.Name}}</td>
            <td>{{contact.Address}}</td>
            <td>{{contact.Celphone}}</td>
        </tr>
    </tbody>
</table>

我希望每行在"悬停"时改变颜色,在"点击"时改变不同颜色,所以我尝试用CSS:

<style>
.my_table tbody tr:hover {
   background-color: #7fccee; /*--- this is a blue color when hover ---*/
}
.my_table tbody tr:focus {
   background-color: #f3f3f3; /*--- this is a gray color when clicked---*/
}
</style>

悬停工作完美,但焦点不起作用!(奇怪的是,在浏览器控制台中,如果我选择行和" 强制元素状态:焦点 ",那么它将焦点应用于行)

我也尝试过使用带有jquery的SCRIPT:

$(document).ready(function() {
   $('.my_table tbody tr').click(function() {
      $(this).addClass('active'); //I'm adding the color gray with css to '.active' …

我需要创建一个表来显示此人的名字，该人的名字在数组中重复的次数以及每种“颜色”对该特定名字的重复次数。

这是表的数组：

var firstArray = [{
  "Name": "John Doe",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "No"
},
{
  "Name": "John Doe",
  "Green": "Yes",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "No",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "No",
  "Pink": "Yes",
  "Yellow": "No"
},
{
  "Name": "Mike",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "Yes"
},
{
  "Name": "Mike",
  "Green": "No",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "Yes"
}
]

这就是我需要显示表格的方式：

我不知道人们会引入的名字。他们可以多次输入相同的名称，也可以输入完全不同的名称。 …