为什么我不能从连续第 10 个单元格获取 innerHTML，当它适用于小于 10 的单元格时？

Question

目标：显示自行车骑行数据并突出显示骑行是在车内还是车外。

以下是适用于周日和周一的设置：

var rows = document.getElementsByTagName("tbody")
[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"

if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";
}

table {border-collapse: collapse;}
td {border: 2px solid black;}
.in {
background-color: red;
}
.out {
background-color: yellow;
}

<table class="resultGridTable" >
<tbody>
<tr>
<td colspan="2">Week</td>
<td colspan="3">Sun (miles/ave)</td>
<td colspan="3">Mon (miles/ave)</td>
<td colspan="3">Tue (miles/ave)</td>
<td colspan="3">Wed (miles/ave)</td>
<td colspan="3">tdur (miles/ave)</td>
<td colspan="3">Fri (miles/ave)</td>
<td colspan="3">Sat (miles/ave)</td>
<td>Total (miles/ave)</td>
</tr>
<tr>
<td>39</td>
<td>2022-09-25</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out"></td>
<td class="mon_miles">11.50</td>
<td class="mon_ave">16.6</td>
<td class="mon_out">1</td>
<td class="tue_miles">22</td>
<td class="tue_ave">19</td>
<td class="tue_out">1</td>
<td class="wed_miles"></td>
<td class="wed_ave"></td>
<td class="wed_out"></td>
<td class="thur_miles"></td>
<td class="thur_ave"></td>
<td class="thur_out"></td>
<td class="fri_miles">22.50</td>
<td class="fri_ave'">17.9</td>
<td class="fri_out">0</td>
<td class="sat_miles">20.00</td>
<td class="sat_ave">17.9</td>
<td class="sat_out">0</td>
<td>54.00</td>
</tr>
<tr>
<td>38</td>
<td>2022-09-18</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out"></td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out"></td>
<td class="tue_miles">39.00</td>
<td class="tue_ave">36.1</td>
<td class="tue_out">0</td>
<td class="wed_miles">22.00</td>
<td class="wed_ave">17.8</td>
<td class="wed_out">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">16.8</td>
<td class="thur_out">0</td>
<td class="fri_miles"></td>
<td class="fri_ave'"></td>
<td class="fri_out"></td>
<td class="sat_miles">22.00</td>
<td class="sat_ave">17.7</td>
<td class="sat_out">0</td>
<td>101.00</td>
</tr>
<tr>
<td>37</td>
<td>2022-09-11</td>
<td class="sun_miles">17.00</td>
<td class="sun_ave">21.8</td>
<td class="sun_out">1</td>
<td class="mon_miles">20.00</td>
<td class="mon_ave">21.3</td>
<td class="mon_out">1</td>
<td class="tue_miles">17.00</td>
<td class="tue_ave">18.6</td>
<td class="tue_out">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.4</td>
<td class="wed_out">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">18.8</td>
<td class="thur_out">0</td>
<td class="fri_miles">20.00</td>
<td class="fri_ave'">18.6</td>
<td class="fri_out">0</td>
<td class="sat_miles"></td>
<td class="sat_ave"></td>
<td class="sat_out"></td>
<td>115.00</td>
</tr>
<tr>
<td>36</td>
<td>2022-09-04</td>
<td class="sun_miles">18.00</td>
<td class="sun_ave">18.8</td>
<td class="sun_out">0</td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out"></td>
<td class="tue_miles">19.00</td>
<td class="tue_ave">18.7</td>
<td class="tue_out">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.5</td>
<td class="wed_out">0</td>
<td class="thur_miles">17.00</td>
<td class="thur_ave">18.9</td>
<td class="thur_out">0</td>
<td class="fri_miles">17.00</td>
<td class="fri_ave'">19.0</td>
<td class="fri_out">0</td>
<td class="sat_miles">16.00</td>
<td class="sat_ave">18.9</td>
<td class="sat_out">0</td>
<td>110.00</td>
</tr>
</tbody>
</table>

但当我试图通过将脚本更改为：来添加周二时

var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"

if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";

if (cells[10].innerHTML == '0')
cells[9].className = "in",
cells[8].className = "in";
if  (cells[10].innerHTML == '1')
cells[9].className = "out",
cells[8].className = "out";}

它不喜欢Cell[10]，我收到一条错误消息：

未捕获类型错误：无法读取未定义(读取"innerHTML"(的属性

它不喜欢任何超过10的数字。我迷路了，任何帮助都将不胜感激。

Answer 1

感谢这些评论，我开始工作并隐藏输入/输出列(请参阅下面的代码(。还没有弄清楚TG的循环。

var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"

if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";

if (cells[10].innerHTML == '1')
cells[9].className = "in",
cells[8].className = "in";
if (cells[10].innerHTML == '0')
cells[9].className = "out",
cells[8].className = "out";

if (cells[13].innerHTML == '1')
cells[12].className = "in",
cells[11].className = "in";
if (cells[13].innerHTML == '0')
cells[12].className = "out",
cells[11].className = "out";                

if (cells[16].innerHTML == '1')
cells[15].className = "in",
cells[14].className = "in";
if (cells[16].innerHTML == '0')
cells[15].className = "out",
cells[14].className = "out";

if (cells[19].innerHTML == '1')
cells[18].className = "in",
cells[17].className = "in";
if (cells[19].innerHTML == '0')
cells[18].className = "out",
cells[17].className = "out"; 
if (cells[22].innerHTML == '1')
cells[21].className = "in",
cells[20].className = "in";
if (cells[22].innerHTML == '0')
cells[21].className = "out",
cells[20].className = "out";                 
}

table {border-collapse: collapse;}
td {border: 2px solid black;}
.hide {display: none;}
.in {
background-color: red;
}
.out {
background-color: yellow;
}

<table class="resultGridTable" >
<thead>
<th colspan="2">Week</th>
<th colspan="3">Sun (miles/ave)</th>
<th colspan="3">Mon (miles/ave)</th>
<th colspan="3">Tue (miles/ave)</th>
<th colspan="3">Wed (miles/ave)</th>
<th colspan="3">thur (miles/ave)</th>
<th colspan="3">Fri (miles/ave)</th>
<th colspan="3">Sat (miles/ave)</th>
<th>Total (miles/ave)</th>
</thead>
<tbody>      
<tr>
<td>39</td>
<td>2022-09-25</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out hide"></td>
<td class="mon_miles">11.50</td>
<td class="mon_ave">16.6</td>
<td class="mon_out hide">1</td>
<td class="tue_miles">22</td>
<td class="tue_ave">19</td>
<td class="tue_out hide">1</td>
<td class="wed_miles"></td>
<td class="wed_ave"></td>
<td class="wed_out hide"></td>
<td class="thur_miles"></td>
<td class="thur_ave"></td>
<td class="thur_out hide"></td>
<td class="fri_miles">22.50</td>
<td class="fri_ave'">17.9</td>
<td class="fri_out hide">0</td>
<td class="sat_miles">20.00</td>
<td class="sat_ave">17.9</td>
<td class="sat_out hide">0</td>
<td>54.00</td>
</tr>
<tr>
<td>38</td>
<td>2022-09-18</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out hide"></td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out hide"></td>
<td class="tue_miles">39.00</td>
<td class="tue_ave">36.1</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">22.00</td>
<td class="wed_ave">17.8</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">16.8</td>
<td class="thur_out hide">0</td>
<td class="fri_miles"></td>
<td class="fri_ave'"></td>
<td class="fri_out hide"></td>
<td class="sat_miles">22.00</td>
<td class="sat_ave">17.7</td>
<td class="sat_out hide">0</td>
<td>101.00</td>
</tr>
<tr>
<td>37</td>
<td>2022-09-11</td>
<td class="sun_miles">17.00</td>
<td class="sun_ave">21.8</td>
<td class="sun_out hide">1</td>
<td class="mon_miles">20.00</td>
<td class="mon_ave">21.3</td>
<td class="mon_out hide">1</td>
<td class="tue_miles">17.00</td>
<td class="tue_ave">18.6</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.4</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">18.8</td>
<td class="thur_out hide">0</td>
<td class="fri_miles">20.00</td>
<td class="fri_ave'">18.6</td>
<td class="fri_out hide">0</td>
<td class="sat_miles"></td>
<td class="sat_ave"></td>
<td class="sat_out hide"></td>
<td>115.00</td>
</tr>
<tr>
<td>36</td>
<td>2022-09-04</td>
<td class="sun_miles">18.00</td>
<td class="sun_ave">18.8</td>
<td class="sun_out hide">0</td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out hide"></td>
<td class="tue_miles">19.00</td>
<td class="tue_ave">18.7</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.5</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">17.00</td>
<td class="thur_ave">18.9</td>
<td class="thur_out hide">0</td>
<td class="fri_miles">17.00</td>
<td class="fri_ave'">19.0</td>
<td class="fri_out hide">0</td>
<td class="sat_miles">16.00</td>
<td class="sat_ave">18.9</td>
<td class="sat_out hide">0</td>
<td>110.00</td>
</tr>
</tbody>
</table>