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

Question

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

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

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

A - B

CD

Answer 1

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

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

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

Answer 2

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

$(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");
  });
});

Answer 3

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

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

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

Answer 4

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');
});

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