jQuery – OnClick，更改表格单元格的背景颜色

让我给你看一个演示： 这里

它只适用于行。 它不适用于细胞。 我想用鼠标点击更改单元格（tds’）背景颜色。

例如：a有一个表，它有4个tds。 桌子的背景颜色是白色的。 如果我点击一个td，td应该是红色，而不是我点击b，b td应该是红色而td应该是白色。 如果我点击c比，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'); } ); } ); 

预习

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

HTML：向表中添加一个类：

 ... 

jQuery的：

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

应该管用！

Answer 4

如果你这样做怎么样？

它将对同一行中的其他TD单元执行相同的效果。 或者你想要一个小区点亮关闭桌子上的所有其他单元格，无论哪一行？