jquery - 使用 jquery 突出显示表格行和列

Question

Script在这里用于使用 jquery 突出显示表行和列。 Demo Here

悬停时它会突出显示整行和整列。我只想将鼠标悬停到当前单元格，而不是超出当前单元格的行和列位置。

脚本

$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
  $(this).parent().addClass("hover");
  $("colgroup").eq($(this).index()).addClass("hover");
}
else {
  $(this).parent().removeClass("hover");
  $("colgroup").eq($(this).index()).removeClass("hover");
}
});

有什么帮助吗？

JS Fiddle

Answer 1

您可以尝试以下代码:

HTML:

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>    

JS:

$('td').on('mouseover mouseout', function(){
             $(this).prevAll().addBack()
             .add($(this).parent().prevAll()
             .children(':nth-child(' + ($(this).index() + 1) + ')'))
             .toggleClass('hover');
      });

Demo.