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

Question

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

这是图片。

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

我想可以通过nth child来做到这一点，但是我想通过closest方法来做到这一点。 以下是顶层表格的示例代码：

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

}

但不幸的是，它不起作用。 您能帮我以任何合理的方式工作吗？ 这是我的演示 ，但是Chrome再次阻止了它的性能，可能是由于鼠标悬停了很多。

Answer 1

我在onmouseover事件上删除了名为showDellCell()函数，并更改了事件

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

看看这个

注意：它只是解决了您的问题，但是当您单击添加行或列时，也会发生onmouseover提高：D

更新：注释中的问题如果将指针移到另一个蓝色单元格 ， 如何再次隐藏不相关的红色单元格（如果将指针移出蓝色表格，如何将它们全部隐藏）