0

Суть вопроса в чем, есть таблица, которая состоит из двух столбцов. При клике по ячейке она изменяет цвет. Нужно, чтобы при в каждой колонке можно было бы выделить только одну ячейку.

Тоесть например был клик по ячейки номер 2, в первой колонке, она перекрасилась, потом клик по ячейки номер 5, в тойжэ колнонке, ячейка номер два возвращяет свой начальный цвет, а ячейка номер 5 перекаршивается. Тоже и с второй колонкой.

Просто перекрашивание ячейки сделал, а вот как сделать описаное выше?

<script>
 $(document).ready(function(){
    $('td').click(function () {
        $(this).toggleClass('click');
        });
    });
</script>

<style>
.click {
    background-color:green;
}
</style>

<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>

1 ответ 1

4

Смысл в том, что при клике на ячейку, со всех ячеек, кроме кликнутой, снимается класс click, в то время как на кликнутую он ставится/снимается

$('td').click(function () {
    $('td').not($(this).toggleClass('click')).removeClass('click');
});

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

$('table').on('click', 'td', function () {
    $('td').not($(this).toggleClass('click')).removeClass('click');
});

UPDATE:

Теперь вы у всех ячеек, чей индекc совпадает с кликнутой ячейкой, удаляете класс click. Таким образом в одной колонке всегда будет выделена только одна ячейка:

$('table').on('click', 'td', function () {
    var index = $(this).index();
    $('td').not(this).filter(function() {
        return $(this).index() == index;
    }).removeClass('click');
    $(this).toggleClass('click');
});
7
  • Спасибо, но нюанс, клик по ячейке в первой колонке, потом клик по ячейки второй колонки, первая колонка должны остатся закрашеной, а она возвращает первоначальной цвет. Тоесть нужно выделить дв ячейки, одна в первой колонке, вторая в другой.
    – arashvg
    8 июн 2014 в 7:45
  • 1
    @arashvg ну вам нужно просто ограничить область поиска тега td, типа: $('td', $(this).closest('table')).....
    – lampa
    8 июн 2014 в 7:55
  • 1
    Обновил ответ
    – andreyqin
    8 июн 2014 в 8:03
  • 2
    @arashvg я неправильно прочитал, мой только для разных таблиц. У господина @andreyqin ответ правильный: jsfiddle.net/N2EGr Только чтобы метод toggle работал правильно, я немножко добавил своего.
    – lampa
    8 июн 2014 в 8:06
  • 2
    @lampa, не учел, спасибо за исправление.
    – andreyqin
    8 июн 2014 в 8:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.