Выделение ячеек таблицы по клику

В продолжении статей о рамках у ячеек таблицы, сделаем их появление по клику с помощью JQuery.

Таблица и основные стили из предыдущих примеров:

<table class="table">
	<thead>
		<tr>
			<th>RU</th>
			<th>FR</th>
			<th>US Men</th>
			<th>US Women</th>
			<th>UK</th>
			<th>Длина</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>35.5 RU</td>
			<td>36</td>
			<td>4</td>
			<td>5</td>
			<td>3.5</td>
			<td>22.1</td>
		</tr>
		<tr>
			<td>36 RU</td>
			<td>36 2/3</td>
			<td>4.5</td>
			<td>5.5</td>
			<td>4</td>
			<td>22.5</td>
		</tr>
		<tr>
			<td>36.5 RU</td>
			<td>37 1/3</td>
			<td>5</td>
			<td>6</td>
			<td>4.5</td>
			<td>22.9</td>
		</tr>
		...
	</tbody>
</table>
HTML
.table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
.table th, .table td {
	border: 1px solid #888;
	padding: 10px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
}
CSS
1

Клик по ячейки

/* Hover */
.table td:hover:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px; 
	bottom: 0px;    
	left: 0px;
	border: 3px solid #ffe5c5;
}

/* Click */
.table td.active:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px; 
	bottom: 0px;    
	left: 0px;
	border: 3px solid orange !important;
}
CSS
$(document).ready(function(){
	$('.table th, .table td').click(function(){
		$('.table td').removeClass('active');
		$(this).addClass('active');
	});
});
JS

Результат:

2

Клик по колонке

/* Hover */
.table .hover:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	height: 105%;
	border-left: 3px solid #ffe5c5;
	border-right: 3px solid #ffe5c5;
}
.table thead .hover:after {
	border-top: 3px solid #ffe5c5;
}
.table tbody tr:last-child .hover:after {
	border-bottom: 3px solid #ffe5c5;
	height: auto;
}

/* Click */
.table .active:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	height: 105%;
	border-left: 3px solid orange;
	border-right: 3px solid orange;
}
.table thead .active:after {
	border-top: 3px solid orange;
}
.table tbody tr:last-child .active:after {
	border-bottom: 3px solid orange;
	height: auto;
}
CSS
$(document).ready(function(){
	$('.table th, .table td').hover(function(){
		var t = parseInt($(this).index()) + 1;
		$('th:nth-child(' + t + '),td:nth-child(' + t + ')').addClass('hover');
	}, function() {
		var t = parseInt($(this).index()) + 1;
		$('th:nth-child(' + t + '),td:nth-child(' + t + ')').removeClass('hover');
	});

	$('.table th, .table td').click(function(){
		$('.table th, .table td').removeClass('active');
		var t = parseInt($(this).index()) + 1;
		$('th:nth-child(' + t + '),td:nth-child(' + t + ')').addClass('active');
	});
});
JS

Результат:

3

Клик по строке

В данном примере классы .hover и .active добавляются только к <tr>.

/* Hover */
.table .hover td:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	width: 105%;
	border-top: 3px solid #ffe5c5;
	border-bottom: 3px solid #ffe5c5;
}
.table .hover td:first-child:after {
	border-left: 3px solid #ffe5c5;
}
.table .hover td:last-child:after {
	border-right: 3px solid #ffe5c5;
	width: auto;
}

/* Click */
.table .active td:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;    
	bottom: 0px;    
	left: 0px;
	width: 105%;
	border-top: 3px solid orange;
	border-bottom: 3px solid orange;
}
.table .active td:first-child:after {
	border-left: 3px solid orange;
}
.table .active td:last-child:after {
	border-right: 3px solid orange;
	width: auto;
}
CSS
$(document).ready(function(){
	$('.table tr').hover(function(){
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});

	$('.table tr').click(function(){
		$('.table tr').removeClass('active');
		$(this).addClass('active');
	});
});
JS

Результат:

10.09.2019 15

Поделится

Другие публикации

Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
Пример горизонтального меню для лэндингов, в котором реализовано: При прокрутке меню фиксируется. Выделение...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Сборник методов как сделать HTML таблицу «полосатой» или, как ее еще называют «таблица с зеброй».
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...