У меня есть таблица , нужно как то по очереди проверить все ячейки и если какая то не = 0 , то окрасить ее в другой цвет.Как мне брать значения по очереди и как потом изменить стиль именно этой ячейке?
function colorCells() {
var tbl = document.getElementById("test");
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++) {
var cell = tbl.rows[i].cells[j];
if (cell.textContent != "0") {
cell.classList.add("green");
}
}
}
}
/*function colorCells() {
var tbl = document.getElementById("test");
[...tbl.rows].forEach( row => {
[...row.cells].forEach( cell => {
if (cell.textContent != "0") {
cell.classList.add("green");
}
})
})
}*/
td {
width:20px;
height:20px;
text-align:center;
}
.green {
background:lightgreen;
}
<table id="test" border="1">
<tr><td></td><td>0</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td>0</td><td>0</td><td></td><td></td></tr>
<tr><td></td><td></td><td>0</td><td></td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td>0</td><td></td><td></td><td></td></tr>
<tr><td></td><td>0</td><td></td><td>0</td><td>0</td><td></td></tr>
</table>
<button onclick="colorCells()">Click</button>
Навскидку (сработает не во всех браузерах):
let cells = document.querySelectorAll('td');
cells.forEach(cell => {
if (cell.innerText != '0') cell.style.backgroundColor = 'green'
})
<table>
<tr>
<td>1</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>0</td>
<td>2</td>
</tr>
</table>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей