Question

让我给你看一个演示：here

它只适用于行。它不适用于细胞。我想用鼠标点击更改单元格（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');
  } );
} );

Preview

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：在表格中添加一个类：

<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 4

如果你这样做怎么样？

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

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

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

4 个答案: