javascript - JS - 将第一行与表中的其他行进行比较

Question

我是一个完全的新手，正在寻求帮助。

给出下表:

<table id="table">
 <thead>
  # FIRST ROW
  <tr>
   <th>Apple</th>
   <th>Pizza</th>
   <th>Eggs</th>
 </tr>
 <tbody>
 # SECOND ROW 
 <tr>
  <td>Apple</td>   --> should end with 'success' class
  <td>Juice</td>
  <td>Lettuce</td>
  <td>Oranges</td>
  <td>Eggs</td>    --> should end with 'success' class
 </tr>
 # THIRD ROW
 <tr>
  <td>Pizza</td>   --> should end with 'success' class
  <td>Chicken</td>
 </tr>
 </tbody>
</table>

我想在 SECOND 和 THIRD 行的每个 td 中添加类 'success'匹配 FIRST 行中的任何 td(并且仅在 FIRST ROW 中)。

现在我想到了添加 <td>第一行的值到数组，我不确定接下来应该采取什么步骤(过滤器？for 循环 和“===”比较？):

function myFunction() {
 var tHeadersValues = [];
 var tHeaders = document.getElementById("table").rows[0].cells;

 for (var i = 0; i < tHeaders.length; i++) {
  tHeadersValues.push(tHeaders[i].textContent);
 }

 return tHeadersValues;
}

Answer 1

Object.keys(tHeaders).map(key => tHeaders[key].textContent) 将 td 对象转换为包含文本的数组。剩下的很简单:

function toValues(tHeaders) {
  return Object.keys(tHeaders).map(function(key){ 
      return tHeaders[key].textContent;
  });
}

function myFunction() {
    var rows = document.getElementById("results-table").rows;
    var tHeadersValues = toValues(rows[0].cells);
    for (var i = 1; i < rows.length; i++) {
        var rowCells = rows[i].cells;
        var values = toValues(rowCells);
        for(var j=0;j<values.length;j++) {
          if(values[j].length > 0 && tHeadersValues.indexOf(values[j]) > -1) {
              rowCells[j].className = "success";
          }
        }
    }
}
myFunction();

<style>  
.success {
    background-color: green;  
}
</style>
<table id="results-table">
    <thead>
    <tr>
        <th>Apple</th>
        <th>Pizza</th>
        <th>Eggs</th>
        <th></th>
        <th></th>
    </tr> 
    </thead>
    <tbody>
    <tr>
        <td>Apple</td>
        <td>Juice</td>
        <td>Lettuce</td>
        <td>Oranges</td>
        <td>Eggs</td>
    </tr>
    <tr>
        <td>Pizza</td>
        <td>Chicken</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>