jQueryのは - クリック時、テーブルセルの変更背景色を

Question

は、私はあなたにデモをお見せしましょう：here

それが行のみのために働いています。その細胞のために働いていない。私はマウスのクリックで細胞の（tds '）背景色を変更したい。

たとえば、aはテーブルを持ち、それには4つのtdsがあります。テーブルの背景色は白です。私がtdをクリックすると、tdは赤くなり、bをクリックするとbは赤、tdは再び白になるはずです。私がクリックするよりも、cが赤でなければならず、bが白でなければなりません。

A - B

C - D

Answer 1

にはJavaScriptを更新してみてください。

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

Preview

Answer 2

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

Answer 3

どうすればいいですか？

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

同じ行の他のTDセルと同じ効果があります。または、列に関係なく、テーブル上の他のすべてのセルをオフにするセルの点灯をしたいですか？

Answer 4

代わりにラインを持つ：

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