Задать вопрос
@dimavfox
javascript

Как изменить цвет одной ячейки?

HTML
<!DOCTYPE html>
<html>
<head>
	<title>Table</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="colors">
		<div class="blue">Blue</div>
		<div class="red">Red</div>
		<div class="pink">Pink</div>
	</div>
	<table>
		<tr>
		    <th></th>
		    <th>ПН, 27.05</th>
		    <th>ВТ, 28.05</th>
		    <th>СР, 29.05</th>
		    <th>ЧТ, 30.05</th>
		    <th>ПТ, 31.05</th>
		    <th>СБ, 01.06</th>
		    <th>ВС, 02.06</th>
	   </tr>
		<tr>
		    <th rowspan="2" class="hours">19:00</th>
		    <td></td>
		    <td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
		    <td></td>
		    <td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	   <tr>
	   	    <td class="mar">Хатха Йога<br/>Марина</td>
	    	<td class="mar">Хатха Йога<br/>Марина</td>
	    	<td class="mar">Хатха Йога<br/>Марина</td>
	    	<td></td>
	    	<td></td>
	   </tr>
	   <tr>
	    	<th rowspan="2" class="hours">20:00</th>
	    	<td></td>
		    <td rowspan="2" class="strip">Стрип Пластика Юлия</td>
		    <td></td>
		    <td rowspan="2" class="strip">Стрип Пластика Юлия</td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	   <tr>
	   		<td class="nat">Functional Trainin<br/>Наталья</td>
	    	<td class="nat">Functional Trainin<br/>Наталья</td>
	    	<td class="nat">Functional Trainin<br/>Наталья</td>
	    	<td ></td>
	    	<td></td>
	   </tr>
	   <tr>
	    	<th  rowspan="2" class="hours">21:00</th>
	    	<td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	   <tr>
	   		<td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	   <tr>
	    	<th  rowspan="2" class="hours">22:00</th>
	    	<td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	   <tr>
	   		<td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
		    <td></td>
	   </tr>
	</table>
	<script type="text/javascript">
		$('.colors').hide();

		$('td').on('click', function(){
			$('td').attr('contenteditable', true);
			$('.colors').show();

		});		
		$('div.blue').on('click', function(){
			$('td').css({'backgroundColor':'blue'});
		})	
		
	</script>
</body>
</html>

CSS
td.hours{
	height: 150px;
	width: 150px;
	text-align: right;
}
body{
	background: lightgray;
}
td{
	background: #fff;
}
td{
	border-radius: 5px;
	height: 50px;
	width: 100px;
	text-align: center;
	outline: none;
}
.mar{
	background: lightgreen;
}
.nat{
	background: green;
}
.shp{
	background: #95ffc8;
}
.strip{
	background: #ffe06e;
}
table{
	
}
.colors{
	font-size: 20px;
	position: absolute;
	top: 30px;
	left: 55%;
}

Есть таблица, некоторые ячейки в ней имеют свой цвет фона. При нажатии на ячейку сбоку появляется список цветов (div class="colors"). Надо, чтобы при нажатии на div.blue/ div.red/ div.pink та ячейка, на которую нажал, меняла цвет.
Как сделать?
  • Вопрос задан
  • 149 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript 
<div class="colors">
  <div class="color" data-color="blue">Blue</div>
  <div class="color" data-color="red">Red</div>
  <div class="color" data-color="pink">Pink</div>
</div>

let selectedTD = null;

const $colors = $('.colors').on('click', '.color', function() {
  $(selectedTD).css('backgroundColor', this.dataset.color);
  selectedTD = null;
  $colors.hide();
}).hide();

$('table').on('click', 'td', function() {
  selectedTD = selectedTD === this ? null : this;
  $colors.toggle(!!selectedTD);
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)
23 нояб. 2024, в 23:30
3000 руб./за проект
Нарисовать инфографику в 3-х вариантах
23 нояб. 2024, в 23:03
1 руб./за проект
Ещё заказы