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>

每當它匹配FIRST行中的任何td （並且僅在FIRST ROW中）時，我都想在SECOND和THIRD行中的每個td中添加類' success '。

現在，我想出了將第一行的<td>值添加到數組中的方法，我不確定下一步應該采取什么步驟（ filter ？ 循環和'==='比較？）：

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>