在mouseover上删除另一个DOM对象中第n个元素的类

Question

我有一张蓝色的桌子。当我将指针悬停在此表中的特定单元格上时，它应显示（addClass / removeClass）顶部红色表格中的特定单元格和左侧红色表格中的特定单元格（除非蓝色表格悬停在上面，否则它们应保持隐藏状态）。 / p>

这是照片。

我在蓝色表的每个单元格中都包含了onmouseover="showDellCell()"（之后Chrome拒绝向我显示我的jsfiddle）并且想要编写一个函数来了解哪个单元格在蓝色表格中悬停并更改类两个表中的两个相应单元格。我无法直接指出应该显示哪个单元格，因为该表格是动态的，可以放大或缩小。这就是为什么找到蓝色单元格和两个相应单元格红色表格之间的连接非常重要的原因。

我想可以通过nth child执行此操作，但我想通过closest方法执行此操作。以下是顶级表的示例代码：

function showDellCell() {
  var columnDelIndex = $("td", $(this).closest("table")).index(this);
  $($('del-column')[columnDelIndex]).removeClass("hide");

}

但不幸的是，它不起作用。能帮助我让它以任何合理的方式工作吗？ Here is my demo，但同样，Chrome正在阻止其性能，可能是由于鼠标悬停很多。

Answer 1

我在showDellCell()事件中移除了名为onmouseover的功能并更改了您的活动

<table class="my-table">
  <tr class="default-row">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

$('.my-table tr td').mouseover(function(){
    var columnDelIndex = $("td", $(this).closest("table")).index(this);
   var col_num = $('.my-table tr:first > td').length;
   $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
   $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide'); 
})

Check it out

注意：它只是解决了您的问题，但是当您点击添加行或列时，事件onmouseover raise：D

更新：评论中的问题 How is it possible to hide irrelevant red cells again if I move the pointer to another blue cell (or hide them all if I move the pointer out of the blue table)