javascript - 根据classname查找TD中具有特定值的TR的数量

Question

这是一个示例标记

<table id="MyTable">
<tr>
   <th>Group Name</th>  
   <th>Object Name</th>
</tr>
<tr class="c1">
   <td>Animal</td>  
   <td>Snake</td>
</tr>
<tr class="c2">
   <td>Animal</td>   
   <td>Dog</td>
</tr>
<tr class="c2">
   <td>Place</td> 
   <td>Antarctica</td>
</tr>
<tr class="c3">
   <td>Fruit</td>
   <td>Mango</td>    
</tr>
</table>

需要做的事情:

查找每个类用于特定“组名称”的次数。例如:

Animal : {c1 = 1, c2 = 1, c3 = 0}

Place : {c1 = 0, c2 = 1, c3 = 0}

Fruit : {c1 = 0, c2 = 0, c3 = 1}

我计划使用数据创建柱形图。

进展:

我能够获取组并分别找到每个类的使用次数(不是按组)。但是，我想不出一种方法可以将两者合并以获得所需的结果。

var numc1=0, numc2=0, numc3=0;
var groupNames = [];
columnTh = $("table th:contains('Group Name')"); 
columnIndex = columnTh.index() + 1; 
$('table tr td:nth-child(' + columnIndex + ')').each(function(){        
    
    var groupName = $(this).text()
    if(groupNames.indexOf(groupName)=== -1)
    {           
        groupNames.push(groupName); // Gets all the group names
    }       
    
    switch($(this).closest('tr').attr("class")){ //Gets the number of tr with specified classes. 
        case "c1":                               // gets the number of ALL occurances of class values instead of Group
            numc1++;
            break;
        case "c2":
            numc2++;
            break;
        case "c3":
            numc3++;
            break;
        }  
});

问题:

1. 根据“群组名称”获取类(class)数量。
2. 将所有信息存储在一个对象中。

Answer 1

这里有一些伪代码可以给你一个想法:

create an empty object (results = {})
loop over all `<tr>`
  save first column's text to `group`
  look up if `group`'s value is already in `results`
    if not, add an object named after the value of `group` in `results`, e.g. `results[group] = {}`
  save current element's class to `class`
  look up if `class`' value is already in `results[group]
    if not, add a number field to that object, starting at 1
    if yes, increase the number by one

在此之后，您应该有一个包含以下内容的对象结果:

{
  "Animal" : {"c1" : 1, "c2" : 1}
  "Place" : {"c2" : 1}
  "Fruit" : {"c3" : 1}
}