Как грамотно сделать большую таблицу или подобное?
Здравствуйте
Хочу написать небольшую игру , в игре будет использоваться таблица, вида |2|3| |3| |2| |4|3| |а|3| |3| .... т.е. будет 50-100 значений, по клику на которых будет что-то происходить. Как бы это грамотно оформить? Обычная table и id к каждой ячейке или может есть какие-то другие варианты? |
win32s,
Делегирование событий |
Если по клику/ховеру на td должен меняется цвет, то можно через :focus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
width: 150px;
height: 150px;
}
.p1, .p2, .p3 {
border: 1px solid black;
transition: 1s;
}
.p1 {
background: red;
color: white;
font-size: 30px;
}
.p2 {
background: yellow;
color: #292929;
font-size: 30px;
}
.p3 {
background: green;
color: black;
font-size: 30px;
}
.p1:focus, .p2:focus, .p3:focus {
background: black;
color: white;
font-size: 40px;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<td class="p1"><center>1</center></td>
<td class="p2"><center>2</center></td>
<td class="p3"><center>3</center></td>
</tr>
<tr>
<td class="p2"><center>4</center></td>
<td class="p3"><center>5</center></td>
<td class="p1"><center>6</center></td>
</tr>
<tr>
<td class="p3"><center>7</center></td>
<td class="p1"><center>8</center></td>
<td class="p2"><center>9</center></td>
</tr>
</table>
</center>
</body>
</html>
Примечание: на моб. устройствах :focus не работает |
| Часовой пояс GMT +3, время: 02:03. |