jQuery - OnClick, ändern Hintergrundfarbe für die Tabellenzellen

Question

mich Ihnen eine Demo Lassen Sie zeigen: here

es ist nur für Reihen arbeiten. es funktioniert nicht für Zellen. Ich möchte die Hintergrundfarben von Zellen (tds) mit Mausklicks ändern.

Zum Beispiel: a haben eine Tabelle, und es hat 4 tds. Die Hintergrundfarbe der Tabelle ist weiß. wenn ich auf einen td klicke, sollte ein td rot sein, als wenn ich auf b klicke, b td sollte rot sein und ein td sollte wieder weiß sein. Wenn ich auf c klicke, sollte c rot sein und b sollte jetzt weiß sein.

A - B

C - D

Answer 1

Versuchen Sie, die JavaScript Aktualisierung auf:

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

Preview

Answer 2

HTML: eine Klasse der Tabelle hinzufügen:

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

sollte funktionieren!

Answer 3

Wie wäre es, wenn Sie dies tun?

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

Es wird den gleichen Effekt mit den anderen TD-Zellen in der gleichen Zeile. Oder willst du, dass eine Zelle aufleuchtet, um alle anderen Zellen auf dem Tisch auszuschalten, egal in welcher Reihe?

Answer 4

Anstatt die Zeile mit:

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

Sie konnte es einfach speichern, die die farbige Zelle ist und die Klasse entfernen, ohne, wie diese suchen zu müssen:

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