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

如下表：

<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和第三行添加类 '成功' 每TD每当它在任何TD匹配首先行（只在第一行）。

现在，我想出了将第一行的<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; 
}

来源

2016-03-26 J. Doe

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>

来源

2016-03-26 22:58:19

非常感谢您！你太棒了:)是否有可能将* success *类也添加到第一行的值？反转功能应该可以工作，但我认为这太过分了。 –

对不起，你想做什么？将成功类添加到第一行的所有td元素？ –

第一行可能包含与其他行中的任何td值不匹配的td元素 - 它会很高兴突出显示tds匹配:) –

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>

来源

2016-03-26 23:59:35 user6118838

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

回答

相关问题