Есть табличка 8x8. По дефолту каждая ее клетка имеет белый цвет, я хочу окрасить их в шахматном порядке. Немного поизучав NodeList я написал следующий код. Как мне сделать чтобы клетки красились в шахматном порядке? Есть идея чтобы менять алгоритм окраски каждую строку, но как это сделать не представляю.
let chess_plate_cells = document.querySelectorAll('table>tbody>tr>td');
let chess_plate_rows = document.querySelectorAll('table>tbody>tr');
chess_plate_cells.forEach(function(cell, index, list){
if(index%2 == 0){
cell.classList.toggle('black-cell')
}
else {cell.classList.toggle('white-cell')}
})
* {
padding: 0;
margin: 0;
}
body {
background-color: darkslateblue;
}
td {
background-color: white;
width: 5vw;
height: 5vw;
}
table {
empty-cells: show;
}
.black-cell {
background-color: black;
}
.white-cell {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Plate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<table class="chess-plate">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>