Сравнение строк и изменение цвета строки

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>