根据在TD

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>

需要这样做：

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

  

动物：{c1 = 1，c2 = 1，c3 = 0}

     

地点：{c1 = 0，c2 = 1，c3 = 0}

     

水果：{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. 根据“组名”获取课程数。
2. 将所有信息存储在对象中。

Answer 1

选择所有td，然后选择.reduce。

＆＃13;

＆＃13;

const tds = [...document.querySelectorAll('#MyTable td')];
const groups = tds.reduce((groupObj, td) => {
  const groupName = td.textContent;
  const parentClassName = td.parentElement.className;
  if (!groupObj[groupName]) groupObj[groupName] = {};
  if (!groupObj[groupName][parentClassName]) groupObj[groupName][parentClassName] = 0;
  groupObj[groupName][parentClassName]++;
  return groupObj;
}, {});
console.log(JSON.stringify(groups));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

在此之后你应该有一个包含这些内容的对象results：

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

Answer 3

＆＃13;

＆＃13;

var info = {};
$('tr').not(':eq(0)').each(function() {
  var obj = $(this).children().first();
  const val = obj.text();
  if (!info.hasOwnProperty(val)) info[val] = {
    'c1': 0,
    'c2': 0,
    'c3': 0
  };
  info[val][$(this).prop('class')]++;
});
console.log(info);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;