比较字符串并更改行的颜色

Question

我正在尝试创建一个方法来比较不同数组中的两个元素的字符串。所有字符串都在表格的行中。如果这两个字符串相等，则该行应该是绿色的。否则该行应该是红色的。我已经完成了表格和数组的工作，我只需要帮助比较和更改特定行的颜色。

<style>
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-

width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-

style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>

<table class="tg" style="undefined;table-layout: fixed; width: 363px">
<colgroup>
<col style="width: 121px">
<col style="width: 121px">
<col style="width: 121px">
</colgroup>
<tr>
<th class="tg-031e">Question:</th>
<th class="tg-031e">Correct Answer:</th>
<th class="tg-031e">Your Answer:</th>
  </tr>
  <tr>

<td class="tg-031e">1.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>

<td class="tg-031e">2.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">3.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<script>
    var a1 = new Array()
        a1[0] = new Array("the");
        a1[1] = new Array("of");
        a1[2] = new Array("and");
    var a2 = new Array()
        a2[0] = new Array("the");
        a2[1] = new Array("ha");
        a2[2] = new Array("and");


var nodes = document.querySelectorAll('td.tg-031e:nth-child(2)');
    [].forEach.call(nodes, function(node, index) {
    node.innerText = a1[index][0];
    });

    var nodes = document.querySelectorAll('td.tg-031e:nth-child(3)');
        [].forEach.call(nodes, function(node, index) {
        node.innerText = a2[index][0];
        });

</script>

Answer 1

您可以对每一行使用单个循环并比较数组值，如果它们相同则分配一个类

var a1 = new Array()
a1[0] = new Array("the");
a1[1] = new Array("of");
a1[2] = new Array("and");
var a2 = new Array()
a2[0] = new Array("the");
a2[1] = new Array("ha");
a2[2] = new Array("and");

var trs = [].slice.call(document.querySelectorAll('table.tg tr'), 1);
trs.forEach(function(tr, idx) {
  tr.children[1].innerText = a1[idx][0];
  tr.children[2].innerText = a2[idx][0];
  if (a1[idx][0] == a2[idx][0]) {
    tr.className = 'same';
  }
})

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}
.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border- style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
tr.same {
  background-color: green;
}

<table class="tg" style="undefined;table-layout: fixed; width: 363px">
  <colgroup>
    <col style="width: 121px" />
    <col style="width: 121px" />
    <col style="width: 121px" />
  </colgroup>
  <tr>
    <th class="tg-031e">Question:</th>
    <th class="tg-031e">Correct Answer:</th>
    <th class="tg-031e">Your Answer:</th>
  </tr>
  <tr>
    <td class="tg-031e">1.</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">2.</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">3.</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>