Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как изменить фон в одной ячейке таблицы (https://javascript.ru/forum/misc/70126-kak-izmenit-fon-v-odnojj-yachejjke-tablicy.html)

Maria Send 12.08.2017 22:39

как изменить фон в одной ячейке таблицы
 
Вложений: 1
добрый день, мне надо изменить цвет ячейки после ее нажатия, код сейчас получился такой, но что-то не работает

рони 12.08.2017 22:56

Maria Send,
function capid(el){
el.style.backgroundColor = "red";
}

onclick="capid(this)"

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 12.08.2017 22:58

Maria Send,

https://learn.javascript.ru/event-delegation

j0hnik 13.08.2017 00:09

<html>
<head>
</head>
<body>
<table>
<tr><td>111<td>111<td>111
<tr><td>111<td>111<td>111
<tr><td>111<td>111<td>111
</table>
	<script>
	document.querySelectorAll('td').forEach(el => el.onclick = e => el.style.backgroundColor = 'red');
	</script>
</body>
</html>

laimas 13.08.2017 05:13

j0hnik,
вы уж предупреждайте, что el => el.onclick = e => не во всех браузерах работать будет, а то пишите ради удовлетворения.

laimas 15.08.2017 03:57

Цитата:

Сообщение от squrell
она % на 10-15 увеличивается и темнеет?

Темнеет, светлеет и т.п. да, увеличиться же в размерах отдельно от остальных ячейка таблицы не может, это приведет к изменению размеров и других ячеек таблицы.

j0hnik 15.08.2017 04:11

Цитата:

Сообщение от laimas (Сообщение 461662)
Темнеет, светлеет и т.п. да, увеличиться же в размерах отдельно от остальных ячейка таблицы не может, это приведет к изменению размеров и других ячеек таблицы.

ну что вы

<html>
<head>
<style>
	td{
		transition: .5s;
		border: 1px solid gray;
		font-size: 25px;
		padding: 5px;
	}
	td:hover{
		transform: scale(1.15);
		background-color: rgba(0,0,0,.2);
	}
</style>
</head>
<body>
<table>
<tr><td>111<td>111<td>111
<tr><td>111<td>111<td>111
<tr><td>111<td>111<td>111
</table>
</body>
</html>

laimas 15.08.2017 04:37

j0hnik,
тут иной процесс, причем анимация только лажи добавляет. А размер ячейки на 10-15% это изменятся размеры соответствующей колонки и строки.


Часовой пояс GMT +3, время: 11:43.