Выделение ячеек таблицы
Суть вопроса в чем, есть таблица, которая состоит из двух столбцов. При клике по ячейке она изменяет цвет. Нужно, чтобы при в каждой колонке можно было бы выделить только одну ячейку.
Тоесть например был клик по ячейки номер 2, в первой колонке, она перекрасилась, потом клик по ячейки номер 5, в тойжэ колнонке, ячейка номер два возвращяет свой начальный цвет, а ячейка номер 5 перекаршивается. Тоже и с второй колонкой. Просто перекрашивание ячейки сделал, а вот как сделать описаное выше? Код:
<script> |
Подсказали такой код:
$('td').click(function () {
$('td').not($(this).toggleClass('click')).removeClass('click');
});
Но, нюанс, клик по ячейке в первой колонке, потом клик по ячейки второй колонки, первая колонка должны остатся закрашеной, а она возвращает первоначальной цвет. Тоесть нужно выделить дв ячейки, одна в первой колонке, вторая в другой. |
$(document).ready(function(){
$('td').click(function () {
var columnIndex = $(this).parent().find('td').index(this);
var $column = $(this).parent().parent().find('td:nth-child('+ ++columnIndex +')');
if ( $(this).hasClass('click') ) {
$(this).removeClass('click');
} else {
$column.removeClass('click');
$(this).addClass('click');
}
});
});
|
Проблема решена, может кому-то пригодится
<script>
$(document).ready(function() {
$('table').on('click', 'td', function () {
var index = $(this).index();
$('td').filter(function() {
return $(this).index() == index;
}).removeClass('click');
$(this).toggleClass('click');
});
});
</script>
|
arashvg,
:write: можно было добавить 1 строку в первоначальный вариант
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.click {
background-color: green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
$('td').click(function () {
$('.' + this.className).not(this).removeClass('click');
$(this).toggleClass('click');
});
})
</script>
</head>
<body>
<table class="bordered">
<tr>
<td class="lc" id="id1">Text1</td>
<td class="rc" id="id2">Text2</td>
</tr>
<tr>
<td class="lc" id="id3">Text3</td>
<td class="rc" id="id4">Text4</td>
</tr>
<tr>
<td class="lc" id="id5">Text5</td>
<td class="rc" id="id6">Text6</td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:05. |