Katy93,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.LightGrey{
background-color: LightGrey;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('table').addEventListener('click',
({target}) => {
if(target.closest(".d")) {
const cells = [...target.parentNode.cells];
const index = cells.indexOf(target);
for (let i = index , td; td = cells[i]; i++) {
if(td.classList.contains("d")) td.classList.add("LightGrey");
else break;
}
for (let i = index , td; td = cells[i]; i--) {
if(td.classList.contains("d")) td.classList.add("LightGrey");
else break;
}
}
}
);
});
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>