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 中添加“成功”课程匹配 FIRST 行中的任何 td （仅限第一行）。

现在我想到将第一行的<td>值添加到数组中，我不确定接下来应采取哪些步骤（过滤器？ 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;
}

Answer 1

Object.keys(tHeaders).map(key => tHeaders[key].textContent)将td对象转换为包含文本的数组。其余的是直截了当的：

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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();

＆＃13;

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

＆＃13;

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

2 个答案: