B-Squared B-Squared - 1 month ago 10
Javascript Question

Comparing Strings and changing the color of a row

I am trying to create a method that compares the strings of two elements that are in different arrays. All the the strings are in rows on a table. If those two strings are equal then the row should be green. Otherwise the row should be red. I have the table and array stuff done, I just need help comparing and changing the color of the specific row.

<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

You can use a single loop for each row and compare the array values, if they are the same then assign a class

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>

Comments