我正在尝试创建一个比较不同数组中两个元素的字符串的方法。所有字符串都在表格中的行中。如果这两个字符串相等,则该行应为绿色。否则该行应为红色。我完成了表和数组的工作,我只需要帮助比较和更改特定行的颜色。
<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>
答案 0 :(得分:0)
你可以为每一行使用一个循环并比较数组值,如果它们相同则分配一个类
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>