Question

在HTML表格上，当鼠标在单元格（TD）上时，我想：

将css类“Highlight_TR_TH”添加到单元格的行中。
将css类“Highlight_TD”添加到同一行的所有单元格
将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');
})

演示：Fiddle

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

JQuery的。突出显示表格单元格

4 个答案: