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> 

'成功' すべてのTDでSECONDとTHIRD行にそれがに任意のTDに一致したときに次の表を考えると

FIRST行（およびFIRST ROWでのみ）今の

私は配列に最初の行の<td>値を追加することを思い付いたと私は次の取るべき手順はよく分からない（ループと「===」比較のためにフィルタを？）：

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>

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