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

I'm a completely newbie and looking for help.

我是一个完全新手并寻求帮助。

Given the following table:

鉴于下表:

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

I would like to add class 'success' to every td in SECOND and THIRD rows whenever it matches any td in FIRST row (and only in FIRST ROW).

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

For now I came up with adding <td> values of first row to array and I'm not sure what steps should I take next (filter? for loop and '===' comparison?):

现在我想出了将第一行的值添加到数组中,我不知道接下来应该采取哪些步骤(filter?for loop和'==='比较?):

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

2 个解决方案

#1

Object.keys(tHeaders).map(key => tHeaders[key].textContent) transforms the td objects to an array with the containing text. The rest is straight forward:

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>

#2

function myFunc(){
  var tds = document.getElementsByTagName("td");
  var hds = document.getElementsByTagName("th");
  for(var i=0; i<tds.length; i++) {
    var tdContent = tds[i].innerHTML;
    if(tdContent.length > 0){
        for(var j = 0; j<hds.length; j++) {
          if(tdContent === hds[j].innerHTML) {
            document.getElementsByTagName("td")[i].className = "success";
          }
        }
    }  
  }
}
myFunc();

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