jquery - 查询。突出显示表格单元格

Question

在 HTML 表格上，当鼠标悬停在单元格 (TD) 上时，我想：

1. 将 css 类“Highlight_TR_TH”添加到单元格的行。

2. 将 css 类“Highlight_TD”添加到同一行的所有单元格

3. 将 css 类“Highlight_This_Cell”添加到单元格本身。

基本上，我希望更改这些元素的背景颜色。

我怎样才能做到这一点？

Answer 1

$('td').hover(function(){
    var $this = $(this);
    $this.addClass('Highlight_TD Highlight_This_Cell');
    $this.siblings().addClass('Highlight_TD');
    $this.closest('tr').addClass('Highlight_TR_TH');
},function(){
    var $this = $(this);
    $this.removeClass('Highlight_TD Highlight_This_Cell');
    $this.siblings().removeClass('Highlight_TD');
    $this.closest('tr').removeClass('Highlight_TR_TH');
})

演示：小提琴

Answer 2

$('td').hover(function(){
  $(this).addClass('highlight_this_cell');
  $(this).parent().addClass('highlight_tr');
  $(this).parent().find('td').addClass('highlight_td');
},function(){
  $(this).removeClass('highlight_this_cell');
  $(this).parent().removeClass('highlight_tr');
  $(this).parent().find('td').removeClass('highlight_td');
}
);

.hover()有两个函数，第一个在 mouseover 上执行，第二个在 mouseleave 上执行。

Answer 3

$("td").mouseover(function() {
  $(this).parent().addClass("Highlight_TR_TH");
  $(this).siblings("td").addClass("Highlight_TD");
  $(this).addClass("Highlight_This_Cell");
});

您可以链接这些方法调用，只是以这种方式显示它们以提高可读性。如果您以后想删除这些类，您可以使用mouseleave上面相同的结构来完成它。

（虽然我相信纯CSS可以做你想做的）

Answer 4

尝试这个：

$('td').each(function() {
    $(this).mouseover(function() {
        $(this).addClass('Highlight_This_Cell').siblings('td').addClass('Highlight_TD');
        $(this).parent().addClass('Highlight_TR_TH');
    });
});