|
Сообщение от Katy93
|
|
Как при щелчке из группы клеток выявить номер первой клетки.
|
пост #5 строка 27
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.red{
background-color: #FF0000;
}
</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);
let i = index , td;
for (; td = cells[--i];) {
if(!td.classList.contains("d")) {td = cells[++i];break};
}
td.classList.add("red");
alert(i)
}
}
);
});
</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>