jQuery - OnClick, изменить цвет фона для ячеек таблицы

Позвольте мне показать вам демо: здесь

он работает только для строк. он не работает для ячеек. я хочу изменить цвет фона ячеек (tds) с помощью щелчков мыши.

Например: есть стол, и в нем 4 тд. цвет фона таблицы белый. если я нажму на td, td должен быть красным, чем если я нажму на b, b td должен быть красным, а td снова должен быть белым. если я нажму на c, то c должен быть красным, а b должен быть белым прямо сейчас.

A - B

C - D


jquery cell
person andrew    schedule 28.12.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Попробуйте обновить JavaScript до:

$( function() {
  $('td').click( function() {
    $(this).parents('table').find('td').each( function( index, element ) {
        $(element).removeClass('on');
    } );
    $(this).addClass('on');
  } );
} );

Предварительный просмотр

person Alan Haggai Alavi    schedule 28.12.2010
comment
омг, такой идеальный и быстрый ответ. этот ответ очень помог мне. благодарю вас. - person andrew; 28.12.2010
comment
-1 Я сомневаюсь, что он хочет привязывать КАЖДЫЙ тд по клику... это будет связывать каждый тд. кроме того, он не связывает созданный td ПОСЛЕ рендера. вы должны использовать .live, когда вы действительно хотите связать что-либо - person sethvargo; 28.12.2010
comment
Сет: Я просто обновил кое-что из того, что уже было. Человек, который задал вопрос, никогда не говорил, что в будущем может быть сгенерировано td или что нужно затронуть только один table td. - person Alan Haggai Alavi; 28.12.2010
comment
Андрей: Рад, что вы нашли мой ответ полезным. Если это так, вы можете выбрать мой ответ и проголосовать за него. - person Alan Haggai Alavi; 28.12.2010
comment
+1 это удовлетворяет запрос пользователя. Идея уже здесь, и от пользователя зависит, как он исследует эту идею. - person hallie; 28.12.2010

arrow_upward
1
arrow_downward

Вместо строки:

$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");

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

var light = null;
$(function(){
  $("td").click(function(){
     if(light) { light.removeClass("on"); }
     light = $(this);
     light.addClass("on");
  });
});
person dvvc    schedule 28.12.2010

arrow_upward
0
arrow_downward

HTML: добавьте класс в таблицу:

<table class="color_changing">...</table>

jQuery:

$('table.color_changing tr td').live('click', function(){
  $(this).parent().parent().each('td', function(){
    $(this).removeClass('red');
  });

  $(this).addClass('red');
});

должно сработать!

person sethvargo    schedule 28.12.2010

arrow_upward
0
arrow_downward

Как насчет того, если вы сделаете это?

<script>$(function(){
  $("td").click(function(){
    $(this).addClass("on").siblings().removeClass("on");
  });
});</script>

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

person Marcos Buarque    schedule 28.12.2010