Javascript 鼠标悬停时，删除另一个DOM对象中第n个元素的类

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

这是照片

我已经在蓝色表格的每个单元格中加入了

onmouseover=“showDellCell（）”

（在此之后，Chrome拒绝向我显示我的JSFIDLE），并希望编写一个函数，以了解哪个单元格悬停在蓝色表格中，并更改其他两个表格中两个相应单元格的类别。我不能直接指出应该显示哪个单元格，因为表格是动态的，可以放大或缩小。这就是为什么在红色表格中找到蓝色单元格和两个相应单元格之间的联系很重要的原因

我想可以通过

n个孩子

来实现这一点，但我想通过

最近的

方法来实现这一点。下面是顶部表格的示例代码：

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

}

---

但不幸的是，它不起作用。你能帮我以合理的方式工作吗，但是，Chrome再次阻碍了它的性能，可能是因为鼠标过多。

我删除了

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

$（'.my table tr td'）.mouseover（函数（）{
var columnDelIndex=$（“td”，美元）（此）；
var col_num=$（'.my table tr:first>td'）。长度；
$（$（'.del column td'）[parseInt（columnDelIndex%col_num）]）.removeClass（'hide'）；
$（$（'.del row td'）[parseInt（columnDelIndex/col_num）]）.removeClass（'hide'）；
})

注意：它只是解决了您的问题，但当您单击add row或column时，也会在MouseOver上引发事件：D

更新：评论中的问题

---

谢谢，这是一个非常好的解决方案，但有一个小问题：如果我添加了更多的行/列（使用黄色按钮），那么这个函数不起作用，因为使用了整数4的静态连接，因此当有超过4行和列时，它不能正常工作。也许可以这样做，它将为任何数量的细胞工作？太好了，谢谢！也许你可以帮我解决另一个问题：你知道如果我将指针移到另一个蓝色单元格（或者如果我将指针移出蓝色表格，则将它们全部隐藏），如何再次隐藏不相关的红细胞？也许我应该使用与您的函数相同的模型，但是使用mouseout和addClass（hide）？是的，

addClass

当

mouseout

时，但是如果您使用

mouseover

红色按钮，则表示

mouseout

表格。也许你需要

setTimout

我用

mouseleave

代替。最后一期给你的建议太棒了，谢谢！唯一的一点是：它完美地适用于左侧的红色表格，但对于顶部的表格，当我添加新列时，它还添加了不会消失的红细胞。如果我只添加一列或多列，错误看起来就不同了。这是图片：你认为这是可以解决的还是无法纠正的？