My for loop will iterate multiple times but any changes I want to make to the cells only happens in the first row. The counters for the rows and the cells all go up but the only cells that are updated are the ones in the first row. I've even examined through the console and nothing is happening to the other rows.
Note: I only want the cells with the ID's to be updated
var table = document.getElementById("myTable");
for (var r = 0, n = table.rows.length; r < n; r++) //for every row
{
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) //for every cell
{
var x = document.getElementsByTagName("td")[c];
console.log("row counter " + r);
console.log("cell counter " + c);
if (x.id == "wed_asso") {
schedule_wed();
x.innerHTML = wed_associate;
}
if (x.id == "asso") {
schedule();
x.innerHTML = associate;
}
}
}<table id="myTable">
<tr>
<th> </th>
<th> Wednesday </th>
<th> Thursday</th>
<th> Friday</th>
<th> Saturday</th>
<th> Thursday</th>
<th> Friday</th>
<th> Saturday</th>
</tr>
<tr>
<td> TDR</td>
<td>John</td>
<td id="asso"></td>
<td>Alec</td>
<td id="asso"></td>
<td id="asso"></td>
<td>Alec</td>
<td id="asso"></td>
</tr>
<tr>
<td> </td>
<td id="wed_asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
<td id="asso"> </td>
</tr>
</table>